CODEWITHSUNDEEP
javascriptreactjsreact-hooks
julziemoon
julziemoon

Reputation: 156

Props and onChildClick not working together

I have a parent component "Item" and a child component "Order".

Item has a button that toggles whether "Order" is displayed. If book is displayed, it passes the fetched details as props to the Order component, as well as the function for toggling if its open or closed.

Before adding the props to "Order", the toggle worked perfectly. After adding the props, the prop-handling works as it should, but now the function doesn't work. What am i doing wrong?

const Item = () => {
    const [item, setItem] = useState('');

    const [order, setOrder] = useState('');

    //Api call to get item

    const orderOpenClose = () => {
        setOrder(!order);
    };

    return (
        <>
                <div onClick={orderOpenClose}>
                    <Button text="Order"></Button>
                </div>
                {order ? <Order acc={item} onChildClick={orderOpenClose}/> : ""}
        </>
    )
}

const Order = (props, { onChildClick }) => {

    const { item } = props;

    return (
        <>
                
                <div onClick={onChildClick}>
                    x
                </div>
                <p>{item.title}</p>
    )
}```

Upvotes: 1

Views: 101

Answers (1)

Nadia Chibrikova
Nadia Chibrikova

Reputation: 5036

This (props, { onChildClick }) is just not correct syntaxis, you can either destruct props or pass them as one object, but not both, so you can do either

const Book = ({acc, onChildClick })

or

const Book = (props) => {
 const { acc,onChildClick  } = props;

Upvotes: 1

Related Questions