Add attributes to React element from string

Question

My CMS outputs a string of data attributes to add to an element I wanted to know how I can add the string of attributes to an element in React

This sample code does not appear to work.

function HelloWorld(props) {
  const fromCMS = `data-target="h1" data-content="Hello World"`;
  return (
    <h1 {fromCMS}>{props.content}</h1>
  )
}

Chuck · Accepted Answer · 2021-08-19 19:30:36Z

3

Try this one.

const fromCms = {"data-target": "h1", "data-content": "Hello World"}
...
<h1 {...fromCMS}>

answered Aug 19, 2021 at 19:30

Chuck

8147 silver badges19 bronze badges

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

2 Comments

Cannot change the string that's output from CMS

Use regular expression to change it to the JSON string and parse it.

Vinicius Serafim · Accepted Answer · 2021-08-19 19:10:47Z

0

you must separate the strings to add the atributes

answered Aug 19, 2021 at 19:10

Vinicius Serafim

697 bronze badges