CODEWITHSUNDEEP
reactjs
hackrack
hackrack

Reputation: 85

during combination of JSX and HTML giving [object Object]

I am trying to make an app which if app finds a and any letter e has to give yellow box. for ex:

name ===> n[yellow box]m // lets assume this [yellow box] is real yellow box

game ===> g[yellow box]m

the code below instead of showing me [yellow box] its [object Object] . how to fix it?

 yellowMaker = word => {
  {var newWord = Array.from(word).map((char, index, arr) => {
      if(char == 'a' && arr[index+2] == 'e') {
        return <div className="box yellow"></div>;
      } else if(char == 'e' && arr[index-2] == 'a') {
        return '';
      } else {
        return char;
      }
    }).join('');
    return newWord}
}


body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

h1,
p {
  font-family: Lato;
}

.box {
  float: none;
  height: 20px;
  width: 20px;
  margin-bottom: 15px;
  border: 1px solid black;
  clear: both;
}

.yellow {
  background-color: yellow;
}
.result {
  display: flex;
}

Upvotes: 0

Views: 48

Answers (1)

ZealousWeb
ZealousWeb

Reputation: 1751

try returning the html like this

yellowMaker = word => {
  {var newWord = Array.from(word).map((char, index, arr) => {
      if(char == 'a' && arr[index+2] == 'e') {
        return <div className="box yellow"></div>;
      } else if(char == 'e' && arr[index-2] == 'a') {
        return '';
      } else {
        return char;
      }
    }).join('');
    return <div dangerouslySetInnerHTML={{__html: newWord}}></div> }
}

Upvotes: 1

Related Questions