javascript - React ternary operator with array.map return -
in react render function, using array.map return jsx code in array , rendering it. doesn't seem work, read few questions here suggested using return statement inside if/else block won't work in case. want check whether round , duration set on each array element , pass in jsx code.could tell me different approach please.
render() { var interviewprocessmapped = interviewprocess.map((item, index) => { return {item.round ? <div classname="row title"> <div classname="__section--left"><span classname="section-title">round {index + 1}</span></div> <div classname="__section--right"> <h3>{item.round}</h3> </div> </div> : null } { item.durationhours > 0 || item.durationminutes > 0 ? <div classname="row"> <div classname="__section--left">duration</div> <div classname="__section--right border"> {item.durationhours > 0 ? <span>{item.durationhours} hours</span> : null} {item.durationminutes > 0 ? <span>{item.durationminutes} minutes</span> : null} </div> </div> : null } }); return <div>{interviewprocessmapped}</div> }
{
not required here:
return {item.round ?
if use means returning object.
another issue alone return
means return;
(automatic semicolon insertion) either put condition in same line or use ()
.
write this:
render() { let a, b; var interviewprocessmapped = interviewprocess.map((item, index) => { = item.round ? <div classname="row title"> .... </div> : null; b = (item.durationhours > 0 || item.durationminutes > 0) ? <div classname="row"> .... </div> : null; if(!a || !b) return || b; return [a, b]; }); return (....) }
Comments
Post a Comment