Question 182860 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to print an array inside of an object in react?

I used Jsonify and I have this code

@app.route("/eu/hostnames")
def nameeu():
    global regionEU
    return jsonify(values = regionEU.serverName)

That returns this

enter image description here

I tried using it in react with this

export const Tab = (params) => {
  const [data, setData] = useState([{}])
    
  useEffect(() => {
    fetch('/eu/hostnames').then(
      response => response.json()
    ).then(data => {
      setData(data)
    })
  }, []);
    
  return (
    <>
      {console.log(data)}
      <header className={TabCSS.card}> 
        <h1 className={TabCSS.title}> {params.region_name} </h1>
        {data.map((item, idx) => {
          return <p className={TabCSS.server} key={idx}>{item}</p>;
        })} 
      </header>
    </>
  );
}
  
export default Tab;

It then outputs this

enter image description here

How do I get this thing working? I think it has something to do with the tab.js code in react. I tried a lot of things but nothing works. Plz help <3

Tags:

2

Answers


  1. 0

    Instead of:

    setData(data);

    try using

    setData(data.values);

    In the response from your API, the "values" array contains the strings you want to display. However, when you set the state using setData(data), you’re assigning the entire response object to the state variable, not just the "values" array.

    Login or Signup to reply.
  2. 0

    This line is the problem:

    return <p className={TabCSS.server} key={idx}>{item}</p>;

    You are trying to render an object in your initial case, {}. You also haven’t initialized the state to match the data, which is an object with a .values key. This should fix it:

    export const Tab = (params) => {
  const [data, setData] = useState({ values: [] })
    
  useEffect(() => {
    fetch('/eu/hostnames').then(
      response => response.json()
    ).then(data => {
      setData(data)
    })
  }, []);
    
  return (
    <>
      {console.log(data)}
      <header className={TabCSS.card}> 
        <h1 className={TabCSS.title}> {params.region_name} </h1>
        {data.values.map((item, idx) => {
          return <p className={TabCSS.server} key={idx}>{item}</p>;
        })} 
      </header>
    </>
  );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search