TypeError: Can’t read property ‘map’ of undefined when component uploads a file in React

React newb here. When props.submitClk === true (the green light that my upload button has been clicked and a file is sent from another component's form) , I'm trying to update state setList with a new technique object, but for now just, 'SomeObject'. I then get a "TypeError Can't read property 'map' of undefined" after click. I tried messing around with some conditionals, but no luck after a few hours of trying. Is this a async issue and the map is happening too soon? handleRemove works fine when I'm deleting objects. If I remove the function under the if statement, it will not throw an error on form submit. Also, the object is going to be larger, that it is why its currently nested this way. Thanks for any answers.

function SampleData(props) {
const [list, setList] = React.useState( [
        {
            closedguard: [
                {
                    name: "Armbar",
                    link: "",
                    x: "X",
                    id: "1",
                },
                {
                    name: "Triangle",
                    link: "",
                    x: "X",
                    id: "2",
                },
                {
                    name: "Omaplata",
                    link: "",
                    x: "X",
                    id: "3",
                },
        ] } 
    ] );  
 
    if( props.submitClk === true) {
        setList([...list, 'SomeObject'])
      }

  const handleRemove = (id) => {
    const newList = list[0].closedguard.filter(move => move.id !== id);
    setList([{ closedguard: newList }]);
};

    return (
        <div className="guard">
    
            <ul className="techUl">
                {" "}
                Closed Guard
                {list.map((pos) =>
                        pos.closedguard.map((move, id) => (
                            <li
                                key={id}
                                className="techLi"
                                                
                                >{move.name}
                                <span onClick={(id) => handleRemove(move.id)}> {move.x}</span>
                            </li>
                        ))
                    )}
            </ul>       
        </div>
    );
}



Read more here: https://stackoverflow.com/questions/66344605/typeerror-cant-read-property-map-of-undefined-when-component-uploads-a-file

Content Attribution

This content was originally published by Brandon M at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: