ReactJS: Change Color Simple Component

This entry is part 33 of 35 in the series React JS

See the Pen React simple component by daryl (@darylw) on CodePen.

var green = '#39D1B4';
var yellow = '#FFD712';

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = {
      color: green
    }
    
    this.changeColor = this.changeColor.bind(this);
  }
  
  changeColor() {
    let newColor = (this.state.color == green ? yellow : green);
    this.setState({ color: newColor });
  }
  
  render() {
    return (
      <div className="btn-block" style={{background: this.state.color}}>
        <h1 >
          Change my color
        </h1>
        <button className="btn" onClick={this.changeColor}>
          Change color
        </button>
      </div>
    );
  }  
}

ReactDOM.render(<Toggle />, document.getElementById('app'));

ReactJS: Simple List

This entry is part 32 of 35 in the series React JS

See the Pen React List by sean (@viiiprock) on CodePen.

const List = props => {
  const ComponentToRender = props.component;
  let content = <div />;

  if (props.items) {
    content = props.items.map((item, index) => (
      <ComponentToRender key={`item-${index}`} {...item} />
    ));
  } else {
    content = <ComponentToRender />;
  }

  return <ul>{content}</ul>;
};

const ListItem = props => (
  <li>
    <a href={props.href}>
      <i className={props.icon} />
      {props.name}
    </a>
  </li>
);

const items = [
  { href: "#", icon: "fa fa-phone", name: "bannana" },
  { href: "#", icon: "fa fa-phone", name: "apples" }
];

ReactDOM.render(
  <div>
    <List component={ListItem} items={items} />
  </div>,
  document.getElementById("app")
);