Basic component and props

by jeremenichelli

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script>
<script src="https://fb.me/react-with-addons-15.2.0.js"></script>
<script src="https://fb.me/react-dom-15.2.0.js"></script>
<script src="https://facebook.github.io/react/js/jsfiddle-integration-babel.js"></script>

<div id="accordions"></div>

SCSS

.accordions {
  
  button {
    display: block;
  }
  
  p {
    display: none;
    font-size: 13px;
    font-style: italic;
    line-height: 1.35;
  }
  
  .expanded {
    
    p {
      display:block
    }
  }
  
  > div {
    background-color: #fefefe;
    border: solid 1px gainsboro;
    margin: 0 0 10px;
    padding: 10px;
  }
}
  
body {
  color: #404040;
  font-family: sans-serif;
  padding: 10px 10px 0;
 }

button {
  background: none;
  border: none;
  cursor: pointer;
  display: block;
  font-size: 14px;
  padding-left: 0;
  
  &:after {
    content: ' +';
    color: purple;
    font-weight: bold;
  }
}

.expanded {
  
  button {

    &:after {
      content: ' -'
    }
  }
}

JavaScript 1.7

const heroes = [
	{
  	name: 'Iron Man',
    description: 'Wounded, captured and forced to build a weapon by his enemies, billionaire industrialist Tony Stark instead created an advanced suit of armor to save his life and escape captivity.'
  },
  {
  	name: 'Thor',
    description: 'As the Norse God of thunder and lightning, Thor wields one of the greatest weapons ever made, the enchanted hammer Mjolnir.'
  },
  {
  	name: 'Hawkeye',
    description: 'His above average reflexes and hand-eye-coordination make him the most proficient archer ever known.'
  }
];

class AccordionElement extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      expanded: false
    }
  }
  toggleState() {
  	this.setState({ expanded: !this.state.expanded });
  }
  render() {
    return (
      <div className={ this.state.expanded ? 'expanded' : '' }>
        <button onClick={ this.toggleState.bind(this) }>{ this.props.heading }</button>
        <p>{ this.props.content }</p>
      </div>
    );
  }
}

class Accordions extends React.Component {
  render() {
    return (
    	<div className="accordions">
        { heroes.map(heroe =>
          <AccordionElement
           heading={ heroe.name }
           content={ heroe.description }
           />) }
       </div>
    );
  }
}

ReactDOM.render(<Accordions/>, document.querySelector('#accordions'));