How to add property to prop(ReactComponent)

Question

I wanna set properties (key/name) to props.answerComp/
Consider that props.answerComp = <Radio>

{answers.map((item,id)=> {

    setAnswers([...answers, props.answerComp]) // 1
    // setAnswers([...answers, <Radio name={props.questId} key={id + 1}/>]) // 2 LIKE THIS
})}

I tried props.answerComp.key but it doesn't work

This is result of console.log(props.answerComp) result of console.log(props.answerComp)

score 1 · Answer 1 · answered Nov 12 '22 at 13:20

You can clone the Radio element and extend it with props:

setAnswers(
    answers.map((item, id) => {
      return React.cloneElement(props.answerComp, { name: item.questId, key: id + 1 });
    })
  );

Or even add the key to only a wrapping React.Fragment:

      return <Fragment key={id + 1}>
                 {React.cloneElement(props.answerComp, { name: item.questId })}. 
             </Fragment>;

You'll need to pass the component prop as answerComp={Radio}.

Note that if the answers can be added, deleted or reordered then you should use a better key, item.questId for example, instead of the index.

How to add property to prop(ReactComponent)

1 Answers1