Displaying from JSON stored in state - reactjs

Question

I'm trying to access an API and pull out information to use in my application. Right now, I'm fetching the data I want to use from the SWAPI, and the object gets stored in state in the way I want it to. However, I'm not able to display the JSON from the saved state. Im sure this is easy, but I haven't been able to figure it out. Here is my code:
import React, { Component } from 'react';
const APIQuery = 'https://swapi.co/api/';
class Searchbutton extends Component {
constructor(props) {
super(props);
this.state = { value: 'planets/1', data: [] };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
/*Funcionality to handle form and state of form*/
/* Changes state of value whenever the form is changed, in realtime. */
handleChange(event) {
this.setState({ value: event.target.value });
}
/* Prevents default formsubmit for now, and logs the state that is saved.*/
handleSubmit(event) {
console.log('Be with you, and this was written:' + this.state.data);
event.preventDefault();
}
handleJson(json) {
JSON.stringify(this.state.data);
}
/*Lifecycle method that fetches from API*/
componentDidMount() {
fetch(APIQuery + this.state.value)
.then(response => response.json())
.then(data => this.setState({ data }));
}
render() {
return (
<div className="search_wrapper">
<form onSubmit={this.handleSubmit}>
<label>
Search:
<input
type="text"
className="search_bar"
value={this.state.value}
onChange={this.handleChange}
/>
</label>
<input type="submit" value="May the Force" />
</form>
{this.state.data}
json goes here
</div>
);
}
}

Answer 1

You need to stringify the data before you show it.
You have a method that does that although it does not return anything and you also never call it.
So you could change it to
handleJson(json) {
return JSON.stringify(this.state.data); // added the return statement
}
and then when you want to display it use
{this.handleJson()}
json goes here
Or you could directly stringify before showing it
{JSON.stringify(this.state.data)}
json goes here

Answer 2

You can use
<pre>{JSON.stringify(this.state.data)}</pre>
Here is an example of it: https://stackblitz.com/edit/react-y8bk6f
One of the good alternate solution I found is this:
https://stackoverflow.com/a/35340052/2630817
Changes to your render method
return (
<div className="search_wrapper">
<form onSubmit={this.handleSubmit}>
<label>
Search:
<input
type="text"
className="search_bar"
value={this.state.value}
onChange={this.handleChange}
/>
</label>
<input type="submit" value="May the Force" />
</form>
<pre>{JSON.stringify(this.state.data)}</pre>
json goes here
</div>
);