I'm needing help updating this Array State to show up on as table data-CodePudding

I've been working on this for days and its driving me crazy! All I'm wanting to do is have a dropdown list of data from this json file and have it pushed to an array when the user clicks on it and then it will display on the table on the page, but it won't update more than once when I select another object from the same dropdown list

Code:

import React, { useState, useEffect } from 'react';

import item from '../item.json';

import Container from 'react-bootstrap/Container';
import DropdownButton from 'react-bootstrap/DropdownButton';
import Dropdown from 'react-bootstrap/Dropdown';
import InputGroup from 'react-bootstrap/InputGroup';
import Table from 'react-bootstrap/Table';


const Main = () => {
    let initialArray = [];
    const [arr] = useState(initialArray);
    
    const [count, setCount] = useState(0);
    
    const testBen = (a) => {
        setCount(count 1);
        // console.log(count);
        console.log(a);
        // console.log(arr);
        console.log('testBen function has ran!');
        return initialArray.push(a);
    }
    
    
    
    useEffect(() => {
        document.title = `${count}`;
    }, [testBen]);

    return (
        <Container>
            <div className="space" />
            <InputGroup>
                <DropdownButton
                    variant="outline-secondary"
                    title="Data"
                    id="dropdown"
                >
                    {
                        item.list.map((obj, i) => {
                            // console.log(obj, ' ', i);
                            return (
                                <Dropdown.Item
                                    key={i}
                                    onClick={() => testBen(obj)}>{obj.un_number}</Dropdown.Item>
                            )
                        })
                    }
                </DropdownButton>
            </InputGroup>
            <Table bordered className="text-center">
                <thead>
                    <tr>
                        <th>UN Number</th>
                        <th>Description</th>
                        <th>Total Quantity</th>
                    </tr>
                </thead>
                <tbody>
                    {
                        arr.map((obj, i) => {
                            return (
                                <tr key={i}>
                                    <td>{obj.un_number}</td>
                                    <td>{obj.description}</td>
                                    <td></td>
                                </tr>
                            )
                        })
                    }
                </tbody>
            </Table>
        </Container>
    )

}

export default Main;

JSON data:

{
    "list": [
        {
            "un_number": "UN 0001",
            "description": "Number 0001"
        },
        {
            "un_number": "UN 0002",
            "description": "Number 0002"
        },
        {
            "un_number": "UN 0003",
            "description": "Number 0003"
        },
        {
            "un_number": "UN 0004",
            "description": "Number 0004"
        }
    ]
}

When I save the file in visual studio, it will update but I'm wanting to make it update when the user selects another UN number and have it add to the list.

In the useEffect [testBen] area I've used testBen, initialArray, arr, count and none of them work!

The whole reason count is there was to see if the component would update the table data

CodePudding user response：

You should provide a single source of truth for your array values. It appears that arr isn't updating when you select something from the dropdown.

Make use of the state modifier function that is part of useState, and do away with initialArray

const Main = () => {
    const [arr, setArr] = useState([]);
    
    const [count, setCount] = useState(0);
    
    const testBen = (a) => {
        setCount(count 1);
        // console.log(count);
        console.log(a);
        // console.log(arr);
        console.log('testBen function has ran!');
        setArr([...arr, a])
    }

Also, update your useEffect to have count in the dependency array.

    useEffect(() => {
        document.title = `${count}`;
    }, [count]);