ReactJs - how can I pass data inside one Component

Question

I want to pass data from axiosDidMount function to

 <p className='title' id='boldTitle'>{data goes here}</p>

I can console.log data and it is working and in my example it is a string "New York City".

I got to the point when I write some input in Search.js Component and it is passed to Results.js Component by this.props.userQuery. So the response.data[1][1] is updating correctly and live in console.log as I write input but I have problem with passing this data that I'm getting from Wikipedia to final destination.

What is proper way to pass this data in this example?

import React from 'react';
import axios from 'axios';

export default class Results extends React.Component {

  axiosDidMount(userQuery) {
    //const fruits = [];
    const wikiApiUrl = 'https://en.wikipedia.org/w/api.php?action=opensearch&format=json&origin=*&search=';
    const wikiApiUrlWithQuery = wikiApiUrl + userQuery;
    axios.get(wikiApiUrlWithQuery) 
      .then(response => {
        console.log(response.data[1][1]); //New York City
        console.log(typeof(response.data[1][1])); //string
        //console.log(response.data[2])
        //console.log(response.data[3])
        //fruits.push(response.data[1]);
      }) 
      .catch(err => {
        console.log('Error: =>' + err); 
      });
    //return fruits;
  }

  render() {

    //this.props.userQuery from Search.js
    const test = this.axiosDidMount(this.props.userQuery);

    return(
      <div>
          <a className='title' href="" target='_blank'>
            <div className='result'>
              <p className='boldTitle'>{data goes here}</p>
            <p></p>
            </div>
          </a>
      </div>
    );
  }
}

Did you try setting the state from inside your axios promise? Where the console.log messages are. — user2031111
– user2031111, Commented May 5, 2017 at 2:12
look into the nice docs of React ("codepen.io/gaearon/pen/amqdNA?editors=0010") : it shows clock update just alter the setInterval with your promise inside componentDidMount. — Ash
– Ash, Commented May 5, 2017 at 5:18

Kyle Richardson · Accepted Answer · 2017-05-05 02:18:47Z

1

You should separate your concerns. Make a data receiving component, or a container component that handles data retrieval and conditionally renders the component requiring the data once it's available. Something along the lines of the following:

import React, { Component } from 'react';
import axios from 'axios';

const PresentationComponent = (props) => {
  // return mark with data
}

const PlaceHolderComponent = (props) => {
  // return placeholder markup
}

export default class DataReceivingWrapper extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      data: null
    }
  }
  
  componentDidMount() {
    axios.get(...)
      .then(data) {
        this.setState(Object.assign({}, this.state, { data: data }))
      }...
  }
  
  render() {
      if (this.props.data) {
        return <PresentationComponent />;
      } else {
        return <PlaceHolderComponent />; // or null
      }
  }
}

answered May 5, 2017 at 2:18

Kyle Richardson

5,6553 gold badges20 silver badges40 bronze badges

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

3 Comments

John Taylor Over a year ago

Nice! I change code like you suggested. But now when I use componentDidMount() it starts immediately and this.props.userQuery is passed but too late, the Ajax request ( axios ) was fired witout user input ` axios.get(wikiApiUrlWithQuery) .then(response => { console.log('@componentDidMount'); console.log('%', this.props.userQuery); this.setState(Object.assign({}, this.state, { data: response })) ` `

Kyle Richardson Over a year ago

Ok if you need the user input before the componentDidMount lifecycle hook, move the axios call into another method that you call once you have the user supplied information. The key here is the this.setState() in the .then method of your axios call.

John Taylor Over a year ago

Thanks, that helped!

Collectives™ on Stack Overflow

ReactJs - how can I pass data inside one Component

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