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

user_14572100 0
Viewed 1975

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

react-state react-component reactjs listbox javascript
2 Answers

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.

user_142745970

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);
    };
    ...
}
user_47357810
Related