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
}
}

@PrãtéékThápá added the example above. The data will be in JSON format. So, I would like to display APPLE, ORANGE, PEAR in a list. So I can change the price of each record and check it and then save the checked records. — WILLIAM
– WILLIAM, Commented Aug 28, 2020 at 4:20
@PrãtéékThápá Yes, the price will be show in the input field as default and you can correct it. — WILLIAM
– WILLIAM, Commented Aug 28, 2020 at 4:41

Prateek Thapa · Accepted Answer · 2020-08-28 04:54:28Z

1

You could use your data to build your form.

You need to build the state from your data.
Also, map your input fields with respect to your state.
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;

answered Aug 28, 2020 at 4:54

Prateek Thapa

4,9481 gold badge12 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

WILLIAM Over a year ago

Thanks for your help. but when I added the "return (<Form date = {currentDate} />);" in the onClick function, there is nothing return. Am I missing something?

Prateek Thapa Over a year ago

yeah, you're returning the Form from loadData and using it nowhere.

WILLIAM Over a year ago

ic, how to return the form in the segment below button instead? Thanks

Prateek Thapa Over a year ago

Check this out

Collectives™ on Stack Overflow

How to dynamically show a list of data by React?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related