Accessing React prop array in component

Question

I'm trying to map across an array stored in props in my React component. The problem is that I keep getting an error stating that 'step is not defined', even when I have an array of steps defined such as below. Any thoughts on what I am doing incorrectly? Thanks in advance!

render() {

const protocol = this.props.protocol;

const steps = protocol.steps;

let stepList = null;



if (steps != null) {

  stepList = <ul>

    steps.map(

      step => <li>{step.title}</li>

    )

  </ul>;

} else {

  stepList = 'Do not display list';

}



return (

  <div className="protocols-detail">

    List of steps for {protocol.title}

    { stepList }



  </div>

);

}

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

Answer 1

Issue is in this line, you forgot to use {}, to use any js code inside HTML element always use {} try this:

stepList = <ul>
    {
       steps.map(
         (step,i) => <li key={i}>{step.title}</li>
       )
    }
  </ul>;

One more thing always assign the unique key to each items when creating the ui elements dynamically in the loop.

Accessing React prop array in component

Sign up