Send data from function component to parent component

Question

I have the following function component which renders 3 checkboxes (Shopify Polaris):

function CustomersList() {
    const [selected, setSelected] = useState(['hidden']);

    const handleChange = useCallback((value) => setSelected(value), []);

    return (
        <ChoiceList
            allowMultiple
            title="Customers:"
            choices={[
                {
                    label: 'Customer 1',
                    value: 'customer1',
                },
                {
                    label: 'Customer 2',
                    value: 'customer2',
                },
                {
                    label: 'Customer 3',
                    value: 'customer3',
                }
            ]}
            selected={selected}
            onChange={handleChange}
        />
    );
}

... and the same func. component is used in a parent component (both in same file):

class ParentComponent extends Component {
    render() {
        return (
            <Page title="Title">
                <Layout>
                    <Layout.Section>
                        <Card title="Customers" sectioned>
                            <CustomersList />

                            <Subheading>
                                Selected customers: {customer_value}
                            </Subheading>
                        </Card>
                    </Layout.Section>
                </Layout>
            </Page>
        )
    }
}

Now, my question is how to send and get the customer value (customer1, customer2, etc) from func. component to parent component, to show the value here: Selected customers: {customer_value}?

Thanks

Vineeth Sai · Accepted Answer · 2020-01-24 04:58:55Z

1

You can send a callback into CustomersList that will attach some data to the caller. So your parent component might kind of look like this.

class ParentComponent extends Component {
    state = {
        selection: []
    }

    setSelection(data) {
       this.setState({selection: data});
    }

    render() {
        return (
            <Page title="Title">
                <Layout>
                    <Layout.Section>
                        <Card title="Customers" sectioned>
                            <CustomersList setSelection={this.setSelection}/>

                            <Subheading>
                                Selected customers: {customer_value}
                            </Subheading>
                        </Card>
                    </Layout.Section>
                </Layout>
            </Page>
        )
    }
}

and in your ChoiceList you call that function. that will set that data to it's parent component.

function CustomersList(setSelection) {
    const [selected, setSelected] = useState(['hidden']);

    const handleChange = // Update your handleChange to also call setSelection

and that should do it.

answered Jan 24, 2020 at 4:58

Vineeth Sai

3,4657 gold badges26 silver badges34 bronze badges

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

1 Comment

Alexis Over a year ago

Could you please tell me how to call setSelection in the handleChange function, I tried different ways but I cannot get it working? Thanks

Collectives™ on Stack Overflow

Send data from function component to parent component

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related