Pass props to different components in react - reactjs

Question

Just having troubles, sorry for the noob question, but i can't seem to log the props results in the DisplayData.js file. I am trying to pass the SearchStockResult state to the DisplatData.js file... I have tried to console log the data property with no luck. Not to sure what is going on. Excuse the naming conventions as I had just changed it from a stock search to a crypto search.
import React, { Component } from 'react'
import DisplayData from './DisplayData';
export default class stockSearch extends Component {
state = {
searchResult: '',
}
componentDidMount = () => {
fetch(`https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT&tsyms=USD`)
.then((response) => response.json())
.then(data => {
this.setState({ searchResult: data });
console.log(this.state.searchResult);
});
}
render() {
const {data} = this.state;
return (
<form>
<label>
Name:
<input type="text" name="query" />
</label>
<button>Search Crypto</button>
<DisplayData results={data} />
</form>
)
}
}
import React, { Component } from 'react'
export default class DisplayData extends Component {
dataResults = (props) => {
console.log('from data results', props.results);
}
render() {
return (
<div>
</div>
)
}
}

Answer 1

Make few corrections:
State update is async. So pass a call back function if you want to print it
in StockSearch component, you need to destructure searchResult from state (not data)
In DisplayData component use this.props. Also call your function(dataResults) in render method so that it is called and rendered
Working copy of your code is here
StockSearch Component
import React, { Component } from "react";
import DisplayData from "./DisplayData";
export default class StockSearch extends Component {
state = {
searchResult: ""
};
componentDidMount = () => {
fetch(
`https://min-api.cryptocompare.com/data/pricemulti?fsyms=BTC,ETH,IOT&tsyms=USD`
)
.then(response => response.json())
.then(data => {
this.setState({ searchResult: data }, () => {
console.log("api result", this.state.searchResult);
});
});
};
render() {
const { searchResult } = this.state;
return (
<form>
<label>
Name:
<input type="text" name="query" />
</label>
<button>Search Crypto</button>
<DisplayData results={searchResult} />
</form>
);
}
}
DisplayData Component
import React, { Component } from "react";
export default class DisplayData extends Component {
dataResults = () => {
console.log("from data results", this.props.results);
};
render() {
this.dataResults() // just to print
return <div>{return <div>{JSON.stringify(this.props.results)}</div>;}</div>;
}
}