React Getting Data Attribute from CSHTML parent element

Question

Brand new to React today so apologies in advance.

I have googled but for whatever reason can't seem to find the answer which I know must be out there!

I'm trying to build a TEST component just to learn.

The component is basically going to consist of a header and a number of name value pairs set out in div blocks. So I'm starting with the header and trying to make the component generic by passing in a data attribute.

I have a cshtml page with this node (solution is a .NET Core MVC project in VS2019):

<div id="detailsHeaderText" data-headerText="Details"></div>

I have set up a jsx file which looks like this:

class Header extends React.Component {
  render() {
    return (
      <div className="col-md-12 col-sm-12"><h5>{document.getElementById("detailsHeaderText").getAttribute("data-headerText")}</h5></div>
    );
  }
}

ReactDOM.render(<Header />, document.getElementById('detailsHeaderText'));

This works perfectly and returns a header with the word "Details" in it.

I now want to make it generic so I can do this elsewhere on the page:

<div class="detailsHeaderText2" data-id="2" data-headerText="Header2"></div>
<div class="detailsHeaderText3" data-id="3" data-headerText="Header3"></div>
<div class="detailsHeaderText4" data-id="4" data-headerText="Header4"></div>

etc

How can I output the header text based on a data-attribute input? The idea being that I connect the React render output to the element along the lines of this pseudocode: document.getElementById("detailsHeaderText" + data-id)

I've looked at constructors and super(props) but nothing seems to work as most of the examples are to do with handlers and hence access the event target prop. I've found many links to passing props between components. But none for passing in data from the parent element on a cshtml page.

An answer or a pointer to a detailed answer on passing variables into React would be most helpful. Thanks in advance.

Answer 1

So I'm 12 hours further down the line in terms of learning React and Googling. And solved the problem.

Working code is:

function Header(props) {
  return <div className="col-md-12 col-sm-12"><h5>{props.headertext}</h5></div>;
}

let elems = document.getElementsByClassName("headerText");

function renderToElements(toRender, elements, dataset) {
  for (var i = 0; i < elements.length; i++) {
    let passText = elements[i].dataset[dataset];
    let renderEl = React.createElement(toRender, { headertext: passText })
    ReactDOM.render(renderEl, elements[i]);
  }
}

renderToElements(Header, elems, 'headertext')

Which renders all dom nodes of the following construct:

<div class="headerText" data-headertext="Details"></div>

It may seem like a pointless exercise to some in terms of what it is achieving but hopefully this may help others in grasping some basics as I/they can now build on this to construct more complex components.