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

}

Mayank Shukla · Accepted Answer · 2017-02-05 14:03:20Z

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.

answered Feb 5, 2017 at 14:03

Mayank Shukla

105k19 gold badges163 silver badges146 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Ron M Over a year ago

Thank you! I am still in the learning process and I appreciate the help.

Mayank Shukla Over a year ago

glad, to help you :), if u r beginner in reactjs then read this one, atleast basic things, it will help you alot :) facebook.github.io/react/docs/hello-world.html

Oleg Pro · Accepted Answer · 2017-02-05 14:07:50Z

1

You need to wrap steps.map in { } (inside <ul></ul> tags)

so it should be:

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

answered Feb 5, 2017 at 14:07

Oleg Pro

2,5611 gold badge18 silver badges23 bronze badges

Collectives™ on Stack Overflow

Accessing React prop array in component

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related