How to dynamically show a list of data by React?

Question

I am new to React and trying to display list of data with checkbox and inputbox. In details, I want to grab a series of data from database and put each record into a <div> like element with checkbox and inputbox. So I can check the record and change the data and then do the re-save action after clicking a button. Since the number of data will keep changing, how to make it dynamic? Also, how can I mark down which records are being checked and need to be saved? Thanks!

Code:

App.js:
import React from 'react';
import { useState, useEffect } from 'react';
import { Menu, Message, Button, Segment } from 'semantic-ui-react';
import SemanticDatepicker from 'react-semantic-ui-datepickers';
import 'react-semantic-ui-datepickers/dist/react-semantic-ui-datepickers.css';
import Form from './Form';

export default function App(props){
    const [currentDate, setNewDate] = useState(null);
  const onChange = (event, data) => setNewDate(data.value);
    const loadData= (event) => {
        return (<Form date = {currentDate} />);
    };
    return (
        <div className="App">
            <div>
                <Menu borderless>
                    <Menu.Item >
                        <div >
                            <img src={logo} alt="image" />
                        </div>
                    </Menu.Item>
                </Menu> 
                
                <Segment>
                    <SemanticDatepicker onChange={onChange} />
                    <Button onClick={loadData}>Load Data</Button>
                </Segment>
                <Segment>>
                </Segment>
                //Here will diaplyed returned list of data after click button
            </div>
        </div> 
    )
};

Simple JSON response:

{
"APPLE":{
  "PRICE":100
},
"ORANGE":{
  "PRICE":20
},
"PEAR":{
  "PRICE":10
}
}

Answer 1

You could use your data to build your form.

1. You need to build the state from your data.
2. Also, map your input fields with respect to your state.
3. If the state needs different input fields, you could define your input fields in deriveStateFromData.

You can check the example here

For Object.keys, you could check the docs here

import React from 'react';

const price = {
"APPLE":{
  "PRICE":100
},
"ORANGE":{
  "PRICE":20
},
"PEAR":{
  "PRICE":10
}
}

function deriveStateFromData(data) {
  let state = {}
  Object.keys(data).forEach(key => {
    state[key] = data[key]['PRICE']
  })
  return state;
}

function MyForm({ data }) {
  const [form, setFormData] = React.useState(deriveStateFromData(data));

  const handleChange = e => {
    setFormData({ ...form, [e.target.name]: Number(e.target.value) });
  }

  console.log(form)

  return (
    <>
      {Object.keys(form).map(key => {

        return (
          <div>
            <label>{key}</label>
            <input 
              name={key}
              value={form[key]}
              onChange={handleChange}
            />
          </div>
        )
      })}
    </>
  )
}

const App = () => <MyForm data={price} />

export default App;