integrate dynamic data in react

Question

我创建了一个新的更好的问题在 react.js 中集成动态数据

Answer 1

The best practice is that feed data something like this

[
   {
      data: [
        { name: 'Store Name', value: 'expreso polar'},
        { name: 'Store Id', value: 're485754re'}
      ]   
   }
]

name be the label and value be the data needs to shown in the table for corresponding label

Answer 2

This is something very common that I come across while coding and here is what I do. Im not sure how you are getting your json, whether it be by a fetch or if its hard coded but store it as a json object inside a variable

    const [metadata, setMetadata] = useState([])
    const data = response.json()
    setMetadata(data);
    const Table = useMemo(() => metadata.map(
        ({name, id, tags, address, logo}) => (
            <div>
                <div>Name: {name}</div>
                <div>Id: {id}</div>                
                <div>Tags: {tags}</div>
                <div>Address: {address}</div>
                <div>: {logo}</div>
            </div>
        )
        ),
        [metadata]);

Once you get your metadata in some sort of json format you can simply use the map function to map it all into jsx. Then call it by using <Table/> .

Using useMemo is always a good idea because it will update whenever one of the dependencies changes, in this case metadata.