Tell me, please, how to pass the input value to the axios query? Instead of 'react', it is necessary that the value of 'TextField' be immediately transferred to 'q:'? That is, when a field changes, a request is sent each time.

list.js

constructor(){ super(); this.state = { users: [], value: '' } } componentDidMount(){ API.getUsers().then((allUsers) => { console.log(allUsers); this.setState({ users: allUsers }) }); } handleChange = (event) => { this.setState({ value: event.target.value, }); console.log(this.state.value); }; render(){ return( <div> <div> <TextField floatingLabelText="Search" id="text-field-controlled" value={this.state.value} onChange={this.handleChange.bind(this)} /> <p>{this.state.value}</p> </div> { this.state.users.map((user) => { return <div key={user.id}> <Users/> </div> }) } </div> ) }

api.js

 let API = { getAllUsers: function () { console.log(this.props.params.login); return new Promise(function (resolve, reject) { axios.get('https://api.github.com/search/repositories', { params: { q: 'react', per_page: 20 } }).then(function (allUsers) { resolve(allUsers.data.items); console.log(allUsers.data.items) }) }) } }

    1 answer 1

    So through handleChange and pass the values ​​and in it through .then () change the setState.

     handleChange = (event) => { this.setState({ value: event.target.value, }); API.getAllUsers(event.target.value).then(allUsers => { setState( users: allUsers ) } };

    Redo it so that getAllUsers returns a promise.
    You use the arrow function in the class, so you don’t need to bind.
    Also use debounce to not send the request too often.