Props : looping props

 

class App extends React.Component {
  render() {
    return (
      <div>
        <Friend
          name="Elon"
          hobby={["Dancing", "Drawing", "Singing"]}
        />

        <Friend
          name="Linda"
          hobby={["Piano", "Reading a book", "Gaming"]}
        />
      </div>
    )
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

 

 

option 1

class Friend extends React.Component {
  render() {
    const { name, hobby } = this.props;
    return (
      <div>
        <h1>{name}</h1>
        <ul>
          {hobby.map(h => <li>{h}</li>)}
        </ul>
      </div>
    );
  }
}

 

 

option 2

class Friend extends React.Component {
  render() {
    const { name, hobby } = this.props;
    const list = hobby.map(h => <li>{h}</li>)
    return (
      <div>
        <h1>{name}</h1>
        <ul>
          {list}
        </ul>
      </div>
    );
  }
}