通过搜索传递道具，不会设置状态

Question

I made a search component, I am passing the results of the search back to the parent using props. The issue is it will not setState until the function is triggered so I get the error of undefined in the map loop.

I am trying to show all results until the search is triggered using onChange.

How can I accomplish this.

//Search Component 

    export default class Searchbar extends Component {
      constructor(props){
        super(props)

        }
        state = {
          input : '',
          visable:[],
      }

    onChange=(e)=>{
    this.setState({input: e.target.value})
    let clone = [...this.props.theGitUsers]

    if(e.value === ''){
      this.setState({visable:clone})

    }else{

      let filteredSearch = clone.filter((loginUsers)=>{
        return loginUsers.login.toUpperCase().includes(this.state.input.toUpperCase())
        })

        this.setState({visable:filteredSearch})
    }

    //Passing the state results to App Component using this props to the App function function
    this.props.searchRes(this.state.visable);

    }
      render() {
        return (
          <div>

            <input type="text" onChange= {this.onChange} value={this.state.input} /> 

          </div>
        )
      }
    }


//App.js Parent ////////////////////////

      state={
          gitusers:[],
          searched:[],
          loading:false,

        }


      componentDidMount(){

      this.setState({loading:true});

      setTimeout(() => {

        axios.get('https://api.github.com/users')
        .then(res=> this.setState({gitusers:res.data , loading:false}))


      }, 1000);

    }

    //The search results from Searchbar Component

    searchRes=(visable)=>{
    this.setState({searched:visable})
     }

      render(){

        return (
          <div>

           <Navbar title="Github Finder" icons="fab fa-github" />

           <Searchbar theGitUsers = {this.state.gitusers} searchRes = {this.searchRes} />



    <div className = "container">

    <TheUsers gituser = {this.state.gitusers} loading={this.state.loading} />

    </div>
          </div>

          );
        }

Answer 1

Always check for empty or null while running map over array.

userSearch && userSearch.map(item => {
 console.log(item);
});