ReactJS - execute a javascript code after the ajax function renders the data

Question

Where should I place the JavaScript code, so that I can call a plugin after the render is completed.

<html>

<head>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/es6-promise/3.2.2/es6-promise.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.2.1/react-dom.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/axios/0.13.1/axios.min.js'></script>
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>

<body>


  <div id="root"></div>


  <script type="text/babel">

    const REST_API = 'users.json';

// The root component
const App = props => (
  <div className="app">
      <UserListContainer />
   </div>
);

// Container
class UserListContainer extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      users: [{
        name: 'Loading data...'
      }]
    };
  }

  loadData() {
    axios.get(REST_API).then((response) => {
      //console.log(response.data);
      this.setState({
        users: response.data
      })
    });
  }

  // Life cycles hooks
  // facebook.github.io/react/docs/component-specs.html
  componentWillMount() {};
  componentDidMount() {
    // Data is loaded async, therefore will be inserted after first DOM rendering
    this.loadData();
  };
  componentWillReceiveProps(nextProps) {};
  shouldComponentUpdate(nextProps, nextState) {
    return true;
  };
  componentWillUpdate(nextProps, nextState) {};
  componentDidUpdate(prevProps, prevState) {};
  componentWillUnmount() {};

  render() {
    return (<UserList users={this.state.users} />);
  };
}

// Presentation
const UserItem = (user, index) => (
  <li key={index}>
          <div className="header"> 
            <div className="name"> {user.name}</div>

            <div className="index">{(index+1)}</div>
          </div>

            <div className="date">
            <i className="fa fa-date" aria-hidden="true"></i>
            <span>{user.date}</span>
          </div>



          <div className="contact">
            <i className="fa fa-phone" aria-hidden="true"></i>
            <span>{user.phone}</span>
          </div>
      </li>
);
const UserList = props => (
  <div className="user-list">
    <h1>React ES6 Ajax, Container and Presentation - example</h1>
    <ul>
        {props.users.map(UserItem)}
     </ul>
   </div>
);

// Render
ReactDOM.render(
  <App />, document.getElementById('root')
);

    </script>



</body>

</html>

I added it to

  componentDidUpdate(prevProps, prevState) {
    alert();
  };

Then , after the first element, the alert function is working,

These are my actual files - https://drive.google.com/drive/folders/1G7UOaCFS_521hfZc4-jNeLGiKR4XaQjP?usp=sharing

Dacre Denny · Accepted Answer · 2018-09-04 04:26:18Z

1

If I understand your requirements correctly, then the componentDidUpdate() hook would be the correct hook to use to access the DOM (and call your plugin). This will be called after your component has rendered.

As state in the official docs for componentDidUpdate():

Use this as an opportunity to operate on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props (e.g. a network request may not be necessary if the props have not changed).

A key thing to note is that the componentDidUpdate() hook does not fire for the first render.

Update

To address this "first render" issue, you could make use of the optional callback that can be passed to setState(state, callback). This callback is fired after your component is rendered (following state change).

In your case, you could do something like this:

loadData() {
    axios.get(REST_API).then((response) => {
      //console.log(response.data);
      this.setState({ users: response.data }, () => {

           // When this callback is invoked, the component has been 
           // rendered and the DOM can be safely accessed
      })
    });
  }

edited Sep 4, 2018 at 4:26

answered Sep 4, 2018 at 4:08

Dacre Denny

30.4k5 gold badges53 silver badges66 bronze badges

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

3 Comments

Arun Prasad E S Over a year ago

I have updated the question please check, is there any way to run it after, all the elements are rendered

Arun Prasad E S Over a year ago

fires after the first element rendering, I would like to have it fired,after all of them renders.

Dacre Denny Over a year ago

@ArunPrasadES I've just updated the answer - does this help you?

Bhojendra Rauniyar · Accepted Answer · 2018-09-04 04:26:42Z

1

componentDidMount is the correct place to fetch data and you're doing it right way. componentDidUpdate hook is used if you need to receive the props or state and update accordingly. This is required if your child component is going to update them from the parent component by receiving the data. But after looking into your code, I din't notice that you're requiring parent component. So, you don't need componentDidUpdate hook. You just need to do as of follows.

Maintain the state like:

this.state = {
  users: [],
  loading: true,
  loadingText: 'Loading data...'
};

Then, after you fetch the data set loading to false:

loadData() {
    axios.get(REST_API).then((response) => {
      //console.log(response.data);
      this.setState({
        users: response.data,
        loading: false
      })
    });
  }

Now, when you render them:

const UserList = props => (
  <div className="user-list">
    <h1>React ES6 Ajax, Container and Presentation - example</h1>
    <ul>
        {!props.loading && props.users && props.users.map(UserItem)}
     </ul>
   </div>
);

Notice: You have to pass the loading state as well.

edited Sep 4, 2018 at 4:26

answered Sep 4, 2018 at 4:16

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

6 Comments

Arun Prasad E S Over a year ago

still the same.

Bhojendra Rauniyar Over a year ago

what's your exact problem?

Arun Prasad E S Over a year ago

@This is my actual file, I just need to attach a plugin to the rendered items after all the elements are rendered - drive.google.com/drive/folders/… Plugin is not included, I need to know the exact place where to initialize the plugin, after the rendering is complete

Bhojendra Rauniyar Over a year ago

how are you including the component?

Arun Prasad E S Over a year ago

I am following a tutorial, new to this.

|

Collectives™ on Stack Overflow

ReactJS - execute a javascript code after the ajax function renders the data

2 Answers 2

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related