React return state

Question

import React from "react";
import { renderToString } from 'react-dom/server'


export default class Tokens extends React.Component {
  state = {
    loading: true,
    number: null
  };


  async outDataTockens(val){
    val.forEach((ele,ind) =>{
      console.log(ele);
    })
  }

  async componentDidMount() {
    let tokensvar = '<tr> <td>1</td> <td>2</td> </tr>';
    const url = "https://api.multiversx.com/accounts/erd1n0kgesdn7hc63amdfygqfdj9enfa07n2hwup9y8732fg35qcug8q0w0x8s/tokens";
    const response = await fetch(url);
    const data = await response.json();
    data.forEach((ele,ind) =>{
      tokensvar += '<tr> <td>{ele.name}</td> <td>{ele.name}</td> </tr>';
                  
      //<tr> <td>{ele.name}</td> <td>{ele.name}</td> </tr>
      //tokensvar + " " + ele.name;
      //console.log(JSON.stringify(tokensvar));
      this.setState({ number: tokensvar, loading: false });
      //console.log(this.state.number);
    })
    //console.log(this.state);
  }

  

  render() {
    if (this.state.loading) {
      return <div>loading...</div>;
    }

    if (!this.state.number) {
      return <div>didn't get number</div>;
    }
    


    return (
      <div>
        <table className="Token-section-output"> {this.state.number} </table>
      </div>
      
    );
  }
}

why {this.state.number} return : "xxxx" And how to do for this return : xxxx

???

enter image description here

I dont know what i must do I tried a lot of things but I don't know what to do I'm lost, but I still think it's a simple error and easy to solve aresolved for an experimenter, in any case thank you in advance for your help.

Does this answer your question? [Why does calling react setState method not mutate the state immediately?](https://stackoverflow.com/questions/30782948/why-does-calling-react-setstate-method-not-mutate-the-state-immediately) — jnpdx, May 20 '23 at 22:05
Tip: **do not ever create HTML strings in React**. Instead use proper **JSX elements** in the `render()` function. I propose that you search the internet for **`jsx create table`**, you'll find lots of great tutorials which will give better results than what you are doing now. — Peter B, May 20 '23 at 22:17

Yewin · Accepted Answer · 2023-05-21T14:20:39.513

0

Pls update the data into component's state as an array and then render using map fun.

here is an example

update API response

 const data = await response.json();
 this.setState({ rows: data });

render table's row

 render(){
   <table className="Token-section-output">
    <p>table row</p>
    {rows.map((row) => (
      <tr>
        <td>{row?.name}</td>
      </tr>
     ))}
   </table>
 }

if it is possible, we should use reactHook to manage the state of components and there are many benefits. smaller components and easy to control the state and so on.

edited May 21 '23 at 14:20

answered May 21 '23 at 02:57

Yewin

160
1
7

in your example it does not return as an html element but as a string https://ibb.co/t3qjhr3 – August 7337 May 21 '23 at 10:08
I think you should do. update the data into state and use that data to map inside of render function ```const response = await fetch(url); const data = await response.json(); this.setState({ rows: data });``` and then render(){ rows.map((row)=>{}{row?.name})} – Yewin May 21 '23 at 14:14
I've updated my example code. that is looks more convenience. pls check it here https://codesandbox.io/s/pensive-feistel-lxqe0f – Yewin May 21 '23 at 14:16

React return state

1 Answers1