Доступ к массиву React prop в компоненте

Question

Я пытаюсь сопоставить массив, хранящийся в реквизитах, в моем компоненте React. Проблема в том, что я продолжаю получать ошибку, заявляя, что «шаг не определен», даже если у меня есть ряд шагов, определенных ниже. Любые мысли о том, что я делаю неправильно? Заранее спасибо!

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

}

Answer 1

Проблема в этой строке, вы забыли использовать {}, чтобы использовать любой код JS внутри HTML элемента всегда использовать {} попробовать это:

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

Еще одна вещь всегда назначает уникальные key для каждого элемента при создании ui elements dynamically в loop.

Answer 2

Вам нужно обернуть steps.map в { } (внутри <ul></ul> тегов)

так и должно быть:

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