更新反应状态

Question

I am having trouble updating the state in the Parent component. I have React functional components with this structure:

//parent.js
import React, { useState } from 'react';
import Child from './child.js';

const Parent = () => {

    const [ value, setValue ] = useState([
       {name:['tutorial', 1, 'langkah'], value:"ABC"},
       {name:['tutorial', 2, 'langkah'], value:"DEF"},
       {name:['tutorial', 3, 'langkah'], value:"GHI"}
    ]);

    const deleteY = (data) => {
        const newValue = value.filter(obj => !obj.name.includes(data));
        setValue(newValue);
    }

    return (

    <Child deleteX={deleteY} />

    )

}
export default Parent;

...and a Child component:

//child.js
import React from 'react';
import Button from 'antd/es/button'; //edited

const Child = ({deleteX}) => {

    let x = 1;

    return (
        <Button onClick={() => deleteX(x)}>Click Me!</Button>
    )

}
export default Child;

With this setup, I can't delete that particular array in the state value by clicking on the 'Click Me!' button. Why is this happening? Is there something that I missed?

Edit : I forgot to put the import statement for the Button in the child.js code example, and the const newValue . This isn't the source of the problem as I have the proper import and variable declaration in the original file.

Answer 1

You missed the button tag. here is code sandbox working URL

You working example

click the button and see the console.