CODEWITHSUNDEEP
reactjs
UndisclosedCurtain
UndisclosedCurtain

Reputation: 173

Displaying from JSON stored in state

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>
    );
  }
}

Upvotes: 0

Views: 552

Answers (2)

Just code
Just code

Reputation: 13801

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>
    );

Upvotes: 0

Gabriele Petrioli
Gabriele Petrioli

Reputation: 195972

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

Upvotes: 1

Related Questions