Get data attribute from html before calling API in React

Question

I'm building a React component to load blog articles to insert inside a CMS. I will be getting an author name from a data-name attribute from html. When I run this code with url2 (hard coded name of the author) everything works. When I run the code with url1 (name of author read from data-attribute) nothing works. Please help.

I have this html:

<div id="dataElement" data-name="Peter Smith"></div>

And this is the code inside my react component:

constructor(props) {
    super(props);
    this.state = { 
      insightsData: [],
      loading: true,
      authorName: document.getElementById('dataElement').getAttribute('data-name').replace(/ /g, "_")
    }
  }

  componentDidMount(){
    let self = this;

    let url2 = '/api/Insights/GetAuthorArticles?authorName=Peter_Smith&numRecords=5';
    let url1 = `/api/Insights/GetAuthorArticles?authorName=${this.state.authorName}&numRecords=5`;

    this.setState({loading:true});
    var Promise = require("es6-promise");
    Promise.polyfill();
    axios.get(url)
    .then((response) => {
      self.setState({
        insightsData: response.data.InsightsResults.Records
      }, this.setState({loading:false}));
      console.log(response.data.InsightsResults.Records);
    });
  }

where comes from your element with attribute? does this come from your react app? — duc mai
– duc mai, Commented Apr 8, 2019 at 21:13
Yeah, this isn't really in the spirit of React (use state/props to render some HTML, and reflect UI changes back to state). Here it looks like you're approaching this from a traditional HTML/JS mindset (use JS to grab some HTML and process it) which won't work well in the long-term. Store the name in state to begin with and generate the HTML (if you need to) using that data. — Andy
– Andy, Commented Apr 8, 2019 at 21:24
@duc mai The html element is not loaded in React, it's loaded in CMS. The HTML should be loaded before it calls the javascript file that loads a React component with an API call. I just need to get data from that html element into React somehow. — sloth_eyes
– sloth_eyes, Commented Apr 9, 2019 at 15:27

Sagi Rika · Accepted Answer · 2019-04-09 16:22:07Z

1

The html is loaded only after the constructor. Try this, using react ref:

constructor(props) {
    super(props);
    this.state = { 
      insightsData: [],
      loading: true,
    }
  }

  componentDidMount(){
    let self = this;

    let url2 = '/api/Insights/GetAuthorArticles?authorName=Peter_Smith&numRecords=5';
    let url1 = `/api/Insights/GetAuthorArticles?authorName=${document.getElementById('dataElement').getAttribute('data-name').replace(/ /g, "_")}&numRecords=5`;

    this.setState({loading:true});
    var Promise = require("es6-promise");
    Promise.polyfill();
    axios.get(url)
    .then((response) => {
      self.setState({
        insightsData: response.data.InsightsResults.Records
      }, this.setState({loading:false}));
      console.log(response.data.InsightsResults.Records);
    });
  }

EDIT: solution without ref.

edited Apr 9, 2019 at 16:22

answered Apr 8, 2019 at 21:13

Sagi Rika

2,9993 gold badges17 silver badges35 bronze badges

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

3 Comments

duc mai Over a year ago

it could be a solution but if the element is rendered by react so why not store the author name in a state. If the element is not rendered by react so your solution may not work

sloth_eyes Over a year ago

@SagiRika The html element is not loaded in React, it's loaded in CMS. The HTML should be loaded before it calls the javascript file that loads a React component with an API call. I just need to get data with author name from that html element into React somehow.

Sagi Rika Over a year ago

Editted to a solution w/o refs. let me know if it helps. @blueberry

Beaulne · Accepted Answer · 2019-04-08 21:10:34Z

0

<div id="dataElement" data-name="Peter Smith"></div> gets mounted after the constructor. you will never have dataElement in the dom when you run authorName: document.getElementById('dataElement')...

try moving authorName: document.getElementById('dataElement')... to componentDidMount using setState and componentDidMount to componentDidUpdate

Here are the docs, if you wanna deep dive. https://reactjs.org/docs/react-component.html#mounting

answered Apr 8, 2019 at 21:10

Beaulne

5594 silver badges9 bronze badges

Collectives™ on Stack Overflow

Get data attribute from html before calling API in React

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related