How to render an array of spans inside a string in ReactJS?

Question

I have an array of span elements that I need to render inside another static text.

Example final result: Put 3 , 1 and 2 in the right order here the bold numbers are the spans

Here is my code

generateQuestion() {
    const newState = { ...this.state };
    let numbers= newState.numbers.map((item, index) => <span style={{color: "red"}}>{item.number}</span>)
    let textQuestion = `Place the numbers ${numbers[0]}, ${numbers[1]} and ${numbers[2]} in the right order.`;

    return (
        <div>{textQuestion}</div>
    );
}

The problem is I'm getting this at render time Place the numbers [object Object], [object Object] and [object Object] in the right order

When I render numbers array directly I am getting the spans

return (
        <div>{numbers}</div>
);

How can I solve this issue?

Answer 1

You are trying to render objects inside string, the right way is to use jsx instead of string:

generateQuestion() {
  const newState = { ...this.state };
  let numbers= newState.numbers.map((item, index) => <span style={{color: "red"}}>{item.number}</span>)
  let textQuestion = <div>Place the numbers {numbers[0]}, {numbers[1]} and {numbers[2]} in the right order.<div>;

  return (
      {textQuestion}
  );
}