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?

Use a react fragment and not a template string? Or just put the text into the return? — evolutionxbox
– evolutionxbox, Commented Nov 23, 2021 at 13:49

Abdellah Sabiri · Accepted Answer · 2021-11-23 13:51:42Z

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

answered Nov 23, 2021 at 13:51

Abdellah Sabiri

3963 silver badges10 bronze badges

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

4 Comments

evolutionxbox Over a year ago

The variable textQuestion is unnecessary.

Amine Over a year ago

It works thank you , I don't know how I missed that.

Abdellah Sabiri Over a year ago

@evolutionxbox yes it's just to make it more clear compared to using string

Abdellah Sabiri Over a year ago

@Amine Glad it helped! Please, consider accepting the answer.

Collectives™ on Stack Overflow

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

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related