ReactJS rendering appended span fromstring

Question

I have a similar question to this question

I am trying to convert create a custom components where it convert each string to difference color for example

input "A B C D"

output A B C D (cant chance color in this question, so I used Bolt and emphasis instead, same logic)

Currently I have

//In component
function MakeColor(){
  var input = [
    {letter:"A",color:"Red"},
    {letter:"B",color:"Blue"},
    {letter:"C",color:"Orange"},
    {letter:"D",color:"Yellow"}
  ];
  var output ="";
  input.forEach(function(object){
    output=output+"<span className="+object.color+">"+object.letter+"</span>";
  })
  return React.createElement('div',null,output)
}
//In another component
class Display extends Component {
   componentDidMount(){
      this.setState({letter:MakeColor();})
   }
   render(){
      <div>{this.state.letter}</div>
   }
}
//In the outer component
...
render(){
  return(
     ...
     <Display />
     ...
  )
}
...

This will return the text ABCD instead of ABCD

Instead of having it as string have it as array, i.e output.push(...) push the value in each iteration instead of appending — Code Maniac
– Code Maniac, Commented Jul 1, 2019 at 9:16

João Cunha · Accepted Answer · 2019-07-01 09:10:46Z

1

Well you are mixing a lot of concepts.

You don't need state
Use JSX instead of React.createElement, you don't need it with this case.

function Display() { return makeLetter();
}

The makeLetter function:

const LETTERS = [
  { letter:"A",color:"Red" },
  { letter:"B",color:"Blue" },
  { letter:"C",color:"Orange" },
  { letter:"D",color:"Yellow" }
];

function makeLetter() {
  return LETTERS.map((obj) => <span className={obj.color}>{obj.letter}</span>);
}

answered Jul 1, 2019 at 9:10

João Cunha

10.3k4 gold badges42 silver badges64 bronze badges

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

Comments

MTCoster · Accepted Answer · 2019-07-01 09:17:10Z

1

Why not just use JSX instead?

let input = [
  { letter: 'A', color: 'Red' },
  { letter: 'B', color: 'Blue' },
  { letter: 'C', color: 'Orange' },
  { letter: 'D', color: 'Yellow' }
];

let output = input.map(item => (
  <span className={item.color}>{item.letter}</span>
));

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

Or even more succinctly:

let input = [...];  // As before

return (
  <div>
    {input.map(item => (<span className={item.color}>{item.letter}</span>))}
  </div>
);

edited Jul 1, 2019 at 9:17

answered Jul 1, 2019 at 9:09

MTCoster

6,1843 gold badges33 silver badges55 bronze badges

Comments

Manoj · Accepted Answer · 2019-07-01 11:00:19Z

0

Here is my observation:

1) You are not usings styles /css classes, neither you have used styles attribute.

So you code should be something like:

  var input = [
    {letter:"A",style: {color:"red"}},
    {letter:"B",style: {color:"blue"}},
    {letter:"C",style: {color:"orange"}},
    {letter:"D",style: {color:"yellow"}}
  ];

and also at below line, you can use JSX to return instead of a string:

 output=output+"<span className="+object.color+">"+object.letter+"</span>";

Try these points, please

edited Jul 1, 2019 at 11:00

answered Jul 1, 2019 at 9:21

Manoj

2,0933 gold badges14 silver badges25 bronze badges

Collectives™ on Stack Overflow

ReactJS rendering appended span fromstring

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related