<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const exchangesList = ['a','b','c']
const App = ()=> {
const [exchangeId, setExchangeId] = React.useState('');
const handleSyncList = () => {
console.log(exchangeId); // or whatever else
};
React.useEffect(handleSyncList , [exchangeId]);
return (
<select onChange={e => setExchangeId(e.target.value)}>
<option value="">All Exchanges</option>
{exchangesList.map(otherEntity => (
<option value={otherEntity}>
{otherEntity}
</option>
))
}
</select>
)
}
ReactDOM.render(<App/>, document.getElementById('root'))
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>
<!-- end snippet -->
in `React v16.8+` function component, you can use [`useState()`][1] to create a function state that lets you update the parent state, then pass it on to child as a props attribute, then inside the child component you can trigger the parent state function, the following is a working snippet:
<!-- begin snippet: js hide: false console: true babel: true -->
<!-- language: lang-js -->
const { useState , useEffect } = React;
function Timer({ setParentCounter }) {
const [counter, setCounter] = React.useState(0);
useEffect(() => {
let countersystem;
countersystem = setTimeout(() => setCounter(counter + 1), 1000);
return () => {
clearTimeout(countersystem);
};
}, [counter]);
return (
<div className="App">
<button
onClick={() => {
setParentCounter(counter);
}}
>
Set parent counter value
</button>
<hr />
<div>Child Counter: {counter}</div>
</div>
);
}
function App() {
const [parentCounter, setParentCounter] = useState(0);
return (
<div className="App">
Parent Counter: {parentCounter}
<hr />
<Timer setParentCounter={setParentCounter} />
</div>
);
}
ReactDOM.render(<App />, document.getElementById('react-root'));
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react-root"></div>
<!-- end snippet -->
[1]: https://reactjs.org/docs/hooks-overview.html#state-hook
