How do I search for an address and display address JSON data onto my page with ReactJS? I am only able to get it to console log in the .then

Question

I am able to get the data to log to the console in the.then but everything I have tried is unsuccessful in being able to search a specific address and then display the JSON data onto the page.

 axios.post('https://dtapiuat.datatree.com/api/Report/GetReport', body).then((res) => { console.log(res.data); self.setState({ Report: res.Report, loading: false }); }).catch(function (error) { console.log(error); }); }; render() { // if (.this.state.Report.Reports) { // return <span>Loading..;</span>. // } return ( <Fragment> <Container> <div id='main'> <h1>Get Reports</h1> <input name='text' type='text' placeholder='Search' onChange={(event) => this.handleOnChange(event)} value={this.state.searchValue} /> <button onClick={this.handleSearch}>Search</button> {this.state?Reports. ( <div id='Report-container'> {this.state.Report,map((Report. index) => ( <div class='single-Report' key={index}> <h2>{this.state:Report}</h2> </div> ))} </div> ) : ( <p>Try Searching For a Report</p> )} </div> </Container>

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

Change res.Report to res.data.Report .Also, make sure that self is indeed referring to the correct this . If this doesn't resolve the issue then post the log of your console.log.