Best way to access state of a React child class component in React parent functional component (react-dual-listbox)

Question

I tend to use react functional components and hooks as I do not have a lot of experience with react. I want to use the react-dual-listbox class component within a parent functional component. Within this parent component I want to be able to access the selected state of the child class component. What is the best way to do this?

Child react-dual-listbox component from https://github.com/jakezatecky/react-dual-listbox

import React from 'react';
import DualListBox from 'react-dual-listbox';

const options = [
    { value: 1, label: 'Option One' },
    { value: 2, label: 'Option Two' },
];

class DualListChild extends React.Component {
    state = {
        selected: [1],
    };

    onChange = (selected) => {
        this.setState({ selected });
    };

    render() {
        const { selected } = this.state;

        return (
            <DualListBox
                options={options}
                selected={selected}
                onChange={this.onChange}
            />
        );
    }
}

Contained within a standard functional component

function Parent() {
    return(
        <div>
            <DualListChild/>
        </div>
    )
}

export default Parent;

Is it possible to, for example, have a hook in the parent component that changes state corresponding to what the dual listbox has selected? Essentially I want to pass state up but to a functional component? Is there a way to do this?

Thanks

Answer 1

You'd do something similar to what you do in DualListChild , except using the useState hook instead:

class DualListChild extends React.Component {
    onChange = (selected) => {
        this.props.onSelected(selected);
    };

    render() {
        return (
            <DualListBox
                options={options}
                selected={this.props.selected}
                onChange={this.onChange}
            />
        );
    }
}

function Parent() {
    const [selected, setSelected] = React.useState();
    return (
        <div>
            <DualListChild selected={selected} onSelected={setSelected} />
        </div>
    )
}

Now you have access to selected (and even setSelected ) inside your Parent component.

Answer 2

As an alternative way, you can have another state that keeps track of selected options in the parent and send its setter function to the child. Whenever the state of the child is changed, call the setter function that is coming from parent. With that way, the selected options state will be up-to-date value for the child and parent components any time.

function Parent() {
    const [selectedOptions, setSelectedOptions] = useState([]);

    return(
        <div>
            <DualListChild onSelectedOptionsChange={setSelectedOptions}/>
        </div>
    )
}

export default Parent;

class DualListChild extends React.Component {
    ...
    onChange = (selected) => {
        this.setState({ selected });
        props.onSelectedOptionsChange(selected);
    };
    ...
}