I have a bunch of checkbox-list requirements. I will explain in detail. I have a bunch of languages say:

var languages = ["English", "German", "French", "Spanish", "Mandarin", "Tamil"]

I have a parent component which has a form where I have four sections, Say:

class Page extends React.Component { render() { return ( <form> <h1>CanSpeak</h1> <chkboxlist someProp="speak" /> <h1>CanSpeak</h1> <chkboxlist someProp="read" /> <h1>CanSpeak</h1> <chkboxlist someProp="write" /> <h1>CanSpeak</h1> <chkboxlist someProp="understand" /> <button onClick={e => { console.log("Need the various chkboxlist values here"); e.preventDefault(); }} > Save </button> </form> ); } }

I want the chkboxlist component to keep track of the list of selected languages in each section and make them available in the "Save" button click handler. I wish to keep track of the state changes (list of selected languages under each section) in the "Page" component.

I do not want to use redux or some such external state management.

Now what is the way to create this chkboxlist component such that the state changes can be tracked in the parent Page component ? Are there any existing components which will fit this requirement and is used widely in the react ecosystem without having to reinvent the wheel ?