<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [chkArray, setChkArray] = useState([]);
const onChangeHandler = e => {
//Creating a new copy of the existing Array
const newChkArray = [...chkArray];
//checking if the checkbox selected is true.
//If yes then adding the value to the checkArray
if (e.target.checked) {
newChkArray.push(e.target.value);
} else if (newChkArray.indexOf(e.target.value) >= 0) {
//If unchecking an already selected item then removing it from the array
newChkArray.splice(newChkArray.indexOf(e.target.value), 1);
}
//Updating the list with new items checked.
setChkArray(newChkArray);
};
return (
<div className="App">
<input
type="checkbox"
id="chk1"
name="chk1"
value="chk1"
onChange={e => onChangeHandler(e)}
/>
<label htmlFor="chk1"> Chk 1</label>
<br />
<input
type="checkbox"
id="chk2"
name="chk2"
value="chk2"
onChange={e => onChangeHandler(e)}
/>
<label htmlFor="chk2"> Chk 2</label>
<br />
<input
type="checkbox"
id="chk3"
name="chk3"
value="chk3"
onChange={e => onChangeHandler(e)}
/>
<label htmlFor="chk3"> Chk 3</label>
<br />
<input
type="checkbox"
id="chk4"
name="chk4"
value="chk4"
onChange={e => onChangeHandler(e)}
/>
<label htmlFor="chk4"> Chk 4</label>
<br />
{JSON.stringify(chkArray)}
</div>
);
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<!-- end snippet -->
React circa 2020
----------------
In the `onClick` callback, call the [state hook's][1] setter function to update the state and re-render:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const Search = () => {
const [showResults, setShowResults] = React.useState(false)
const onClick = () => setShowResults(true)
return (
<div>
<input type="submit" value="Search" onClick={onClick} />
{ showResults ? <Results /> : null }
</div>
)
}
const Results = () => (
<div id="results" className="search-results">
Some Results
</div>
)
ReactDOM.render(<Search />, document.querySelector("#container"))
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
<!-- end snippet -->
[JSFiddle][2]
React circa 2014
----------------
The key is to update the state of the component in the click handler using `setState`. When the state changes get applied, the `render` method gets called again with the new state:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
var Search = React.createClass({
getInitialState: function() {
return { showResults: false };
},
onClick: function() {
this.setState({ showResults: true });
},
render: function() {
return (
<div>
<input type="submit" value="Search" onClick={this.onClick} />
{ this.state.showResults ? <Results /> : null }
</div>
);
}
});
var Results = React.createClass({
render: function() {
return (
<div id="results" className="search-results">
Some Results
</div>
);
}
});
ReactDOM.render( <Search /> , document.getElementById('container'));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.2/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.2/react-dom.min.js"></script>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
<!-- end snippet -->
[JSFiddle][3]
[1]: https://reactjs.org/docs/hooks-state.html
[2]: https://jsfiddle.net/khx30pnv/
[3]: http://jsfiddle.net/kb3gN/15084/
