Ron M Ron M - 4 years ago 182
React JSX Question

Accessing React prop array in component

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>
);


}

enter image description here

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download