How to filter an incoming prop in React?

Tags: ,

I’m trying to build a search bar using hooks but the props that I pass into my functional component gives me error and the output is never loaded. I pass the opt props from options.js to Filter.js. Here’s the code: Options.js

import Filter from './Filter'
import Option from './Option'

export default (props) => {
    return (
            <button onClick={props.handleDeleteOptions}>Remove All</button>
            {props.options.length === 0 && <p>Please add option to get Started!</p>}
       => <Option key={x} optionText={x}
            <Filter opt={props.options} />



export default (props) => {

    const [option, setOption] = React.useState(props);
    const [search, setSearch] = React.useState("");

    return (
                onChange={e => {
                    const test = props.opt.filter(o => {
                        return o.toLowerCase().includes(;
                    console.log("Option: ", test);

            { => (
                <p key={o}>{o}</p>



In you Filter.js you are mapping directly the props.opt. This doesn’t change when you do the filter. What changes is the state. There are two things you need to change for this to work:

  • Fix default option state: const [option, setOption] = React.useState(props.opt);
  • Fix the options map. Instead of props.opt, use option from the state.

Source: stackoverflow