Table not displaying the json values

Question

The table is creating the fields that are seeing in the json url PGX,MORL,EMLC,GYLD,BSJF,MONY It sees 6 symbols and it creates 6 cells. 1 cell for each symbol It knows the are 6 symbols but it does not want to display the values

Where is the issue? Please help

import React, { useState, useEffect } from "react";
import BootstrapTable from 'react-bootstrap-table-next';


const App = props => {
 
  const [hasError, setErrors] = useState(false);
  const [value, setValues] = useState({});

  

  useEffect(() => {
    async function fetchData() {
    const res = await fetch("https://sandbox.iexapis.com/stable/stock/market/batch?symbols=PGX,MORL,EMLC,GYLD,BSJF,MONY&types=stats,quote&token=");
     res
       .json()
       .then(res => setValues(res))
       .catch(err => setErrors(err));
   }
   console.log(quote);
   fetchData();
   }, []);
  const quote = Object.keys(value).map(i => value[i]);
  const columns = [
   
    {
      dataField: 'id', 
      text: 'Id'
    }, {
    
    
    dataField: 'Symbol', 
    text: 'Symbol'
  }, {
    dataField: 'price',
    text: 'Price'
  }, {
    dataField: 'CompanyName',
    text: 'Company Name'
  }];
  return (


    

    <div>
     <BootstrapTable keyField= "id" data={quote} columns={columns} />
     
    </div>


    


  );


}

export default App;

Does this answer your question? [Infinite loop in useEffect](https://stackoverflow.com/questions/53070970/infinite-loop-in-useeffect) — Emile Bergeron, Oct 27 '20 at 22:17
Don't use an async function and then `then.catch` that just hurts my eyes — Julian Kleine, Oct 27 '20 at 22:20
Encountered two children with the same key, `[object Object]`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and coul — ReactJR, Oct 28 '20 at 16:20
heyitsmarcucu @heyitsmarcucu can you please provide the answer for this one? — ReactJR, Oct 29 '20 at 21:09

Bobby Gagnon · Answer 1 · 2020-10-27T22:17:14.613

Well friend, you're in luck. This is a super easy fix. The error is in your useEffect, the second parameter should be an array. If you only want the useEffect to run when the component is initially rendered, it should be an empty array.

A link to the useEffect documentation: https://reactjs.org/docs/hooks-effect.html

It also looks like there is an issue with your fetch call, so you might want to look into that next as it's producing an error.

Lastly, the console.log(value) is not going to log the result as the setPlanets function is asynchronous. Try console logging 'res' and 'err' from within the .then and .catch functions, respectively.

import React, { useState, useEffect } from "react";
import BootstrapTable from 'react-bootstrap-table-next';

const App = () => {
 
  const [hasError, setErrors] = useState(false);
  const [value, setPlanets] = useState({});

  useEffect(() => {
    async function fetchData() {
      const res = await fetch("https://cloud.iexapis.com/stable/stock/market/batch?symbols=PGX,MORL,EMLC,GYLD,BSJF,MONY&types=stats,quote&token=");
      res
        .json()
        .then(res => setPlanets(res))
        .catch(err => setErrors(err));
    }
    console.log(value);
    fetchData();
  }, []);
  const quote = Object.keys(value).map(i => value[i]);
  const columns = [{
    dataField: 'symbol',
    text: 'Symbol'
  }, {
    dataField: 'price',
    text: 'Price'
  }, {
    dataField: 'CompanyName',
    text: 'Company Name'
  }];
  return (
    <div>
     <BootstrapTable keyField='id' data={ quote } columns={ columns } />
    </div>
  );


}

export default App;

thanks, I updated the error: "Each child in a list should have a unique "key" prop — ReactJR, Oct 27 '20 at 23:49
It's a warning, but each item you return in the map function should have a 'key' field as well. you could set it to 'key=id' in this case — Bobby Gagnon, Oct 28 '20 at 11:05
Encountered two children with the same key, [object Object]. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and coul — ReactJR, Oct 28 '20 at 21:34
Easiest solution is to set the key equal to the index, which is the second argument in the map function — Bobby Gagnon, Oct 29 '20 at 14:59

score 1 · Answer 2 · answered Oct 27 '20 at 22:11

1

On useEffect you need to pass [] to execute once or add a dependencie [something]

useEffect(() => {
 async function fetchData() {
 const res = await fetch("https://cloud.iexapis.com/stable/stock/market/batch?symbols=PGX,MORL,EMLC,GYLD,BSJF,MONY&types=stats,quote&token=");
  res
    .json()
    .then(res => setPlanets(res))
    .catch(err => setErrors(err));
}
console.log(value);
fetchData();
}, []);

answered Oct 27 '20 at 22:11

Florin

292
2
13

thanks, I updated the error: "Each child in a list should have a unique "key" prop." – ReactJR Oct 27 '20 at 23:02
Your data has the key `id` with a value integer? – Florin Oct 28 '20 at 04:59
Encountered two children with the same key, `[object Object]`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and coul – ReactJR Oct 28 '20 at 16:20

Table not displaying the json values

2 Answers2