Data from API rendering as empty (array/object issue)

Question

I have a components that aims to display data from API:

class Item extends Component {
constructor(props) {
  super(props);
  this.state = {
    output: []
  }
}

componentDidMount() {
    fetch('http://localhost:3005/products/157963')
      .then(response => response.json())
      .then(data => this.setState({ output: data }));
  }


render() {
    console.log(this.state.output);
  return (
    <ItemPanel>
    <ItemBox>
    <BoxTitle>{this.state.output}</BoxTitle>
  </ItemPanel>
  );
  }
 export default Item;

console.log(this.state.output) returns proper data, while my component won't render, its throwing this error:

Objects are not valid as a React child (found: object with keys {id, general, brand, images}). If you meant to render a collection of children, use an array instead.

I guess the data from api is an object. I have tried using JSON.parse or toString() already :/

This is output from console:

can you share what this.state.output it consoles? what exactly you want to show in <BoxTitle> from id, general, brand, images ? — Harish
– Harish, Commented Jun 10, 2019 at 8:38

Harish · Accepted Answer · 2019-06-10 09:02:25Z

1

It seems like you are displaying whole object in <BoxTitle>, Let's try to show brand here. I have update the code given in question. Updated initial state output [] to {}

class Item extends Component {
constructor(props) {
  super(props);
  this.state = {
    output: {}
  }
}

componentDidMount() {
    fetch('http://localhost:3005/products/157963')
      .then(response => response.json())
      .then(data => this.setState({ output: data }));
  }


render() {
    console.log(this.state.output);
  const { brand = {name : ""} } = this.state.output // added default name until we get actual value
  return (
    <ItemPanel>
    <ItemBox>
    <BoxTitle>{brand.name}</BoxTitle>
  </ItemPanel>
  );
  }
 export default Item;

edited Jun 10, 2019 at 9:02

answered Jun 10, 2019 at 8:46

Harish

1,9111 gold badge15 silver badges26 bronze badges

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

4 Comments

Wiktor Kisielewski Over a year ago

Small fix was needed here: { brand = {name = ""} } -> { brand= {name: ""} }, and it is working now. Thanks a lot!

Ashish Kamble Over a year ago

<ItemBox> is not closed should be <ItemBox/>

Wiktor Kisielewski Over a year ago

Im now struggling to access images from that api, have tried const { images = {primary:""} } = this.state.output; and a few variations, but still cant load image src. Help appreciated

Harish Over a year ago

try this, const { brand = {name : ""} , images: {primary: {...}} = this.state.output

Oluwafemi Sule · Accepted Answer · 2019-06-10 08:46:45Z

0

While your component fetches from your API it renders the element tree described in the render function.

Initial state for output is an empty array and that's a good start.

You should consider what to display to your application user when loading data from the API or if the network request fails.

I'm quite sure that you don't want to render the object returned upon a successful API call as-is.

That said, JSON.stringify function can be used for viewing what result is set in state upon a successful API call before picking what fields will be displayed, how and where they are displayed.

answered Jun 10, 2019 at 8:46

Oluwafemi Sule

39.3k1 gold badge63 silver badges88 bronze badges

Comments

Ashish Kamble · Accepted Answer · 2019-06-10 09:35:04Z

0

you can better use conditional rendering,

render() {
    console.log(this.state.output);
  return (
    <ItemPanel>
     <ItemBox>
     {
       if(this.state.output.brand.name !=== null) ?
         <BoxTitle>{this.state.output.brand.name}</BoxTitle> :
       <BoxTitle>Brand Name is Empty</BoxTitle>
     }
    </ItemPanel>
  );
  }

answered Jun 10, 2019 at 9:35

Ashish Kamble

2,8254 gold badges23 silver badges30 bronze badges

Collectives™ on Stack Overflow

Data from API rendering as empty (array/object issue)

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related