wdi-honeybadger / w07d05-react-loops-and-props

React Loops and Props

Learning Objectives

• More ES6 (Destructuring, Rest Parameters and Spread Operator)
• Use javascript within our JSX
• Add methods to our react components
• Loop through data to render JSX
• Pass data to other components using props
• Use functional components when appropriate

Use javascript within our JSX

To use javascript in our JSX we put it in curly braces {}

<p>{ 5+1 }</p>

Add methods to our react components

We can add methods to our components in the same way we would to any class. We can then call that method in our JSX by using curly braces {} and the key word this

class App extends Component {
  sayHi(person){
    return `Hi ${person}`
  }
  render(){
    return(
      <p>{this.sayHi('Trevor')}</p>
    )
  }
}

Loop through data to render JSX

Create a method that will map through our data. We can then return from that map callback JSX for each of the elements. Then within our render function we call that method to render the elements we created.

class App extends Component {
  sayHi(person){
    return `Hi ${person}`
  }

  sayHiToTeachers(){
    const teachers = ['Trevor', 'Ghadeer', 'Jackie'];
    const teacherElements = teachers.map((teacher)=> {
      return(
        <p>{this.sayHi(teacher)}</p>
      )
    })
    return teacherElements
  }
  render(){
    return(
      <div>
        {this.sayHiToTeachers()}
      </div>
    )
  }
}

Pass data to other components using props

Use functional components when appropriate