adding innerHTML and style to part of a string in react

Question

I am trying to extract part of a string value that includes the Trade Mark in react and apply className or inline style so i can change the style, but the result i am getting from this code is [object object]

const dataTm = <span style={{ border: '2px black solid' }}>™</span>

const changeFormat = (item) => {
  const replaceTm = item?.name.replace('™', `${dataTm}`)
  return ReactHtmlParser(replaceTm)
}
const menu = () =>{
return(
<Link>
 {item?.name.includes('™') ? changeFormat(item) : item?.name}
<Link>
)}

kind user · Accepted Answer · 2022-11-14 15:57:41Z

2

String#replace returns a string - it converts everything what passed in into a string as well. And if you try to convert an object (and this is what JSX is - an object), you will get [Object object] in return.

You have to slightly modify your code, the most important difference is to change the dataTm variable to a string, so it can be properly understood by the String#replace function.

const item = {
  name: 'abc™abc',
};

export default function App() {
  const dataTm = "<span style='font-size:32px;color:red'>™</span>";

  const changeFormat = (item) => {
    const replaceTm = item?.name.replace('™', dataTm);
    return ReactHtmlParser(replaceTm);
  };

  return (
    <div>{item?.name.includes('™') ? changeFormat(item) : item?.name}</div>
  );
}

https://codesandbox.io/s/bitter-frost-5fk6je?file=/src/App.js

The code above and in the codesandbox it's just a minimal example. In your code sample you should just wrap dataTm with quotes and adjust the styles a bit and it should work properly.

edited Nov 14, 2022 at 15:57

answered Nov 14, 2022 at 15:46

kind user

42k8 gold badges69 silver badges78 bronze badges

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

3 Comments

Afra Over a year ago

i used what you suggested and i get undefined value for const replaceTm ``` const dataTm = '<span style=font-size:32px;>™</span>' const changeFormat = (item) => { const replaceTm = item?.name.replace('™', dataTm) console.log(dataTm) console.log(replaceTm) return ReactHtmlParser(replaceTm) }```

Afra Over a year ago

from my understanding .replace just change a string with a new string, i am not sure why we use dataTm just by itself there

kind user Over a year ago

@Afra Hmm, it works well for me. Please check the updated codesandbox.

Collectives™ on Stack Overflow

adding innerHTML and style to part of a string in react

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related