Just going to drop my code real quick:
class Search extends React.Component {
constructor() {
super()
this.state = {
searchTerms: ['test'],
searchData: [],
}
this.handleSearch = this.handleSearch.bind(this);
}
handleSearch(e) {
e.preventDefault();
const target = document.getElementById('data');
let searchQuery;
let multiTest = (target.value.includes(' ')) ? false : true;
if (target.value === '') {
searchQuery = 'no item!';
} else if (target.value !== '' && multiTest) {
searchQuery = target.value;
} else {
searchQuery = 'invalid'
}
let data = [];
for (let t of this.state.searchTerms) {
data.push(t);
}
this.setState({
searchTerms: [...this.state.searchTerms, searchQuery]
})
console.log(this.state.searchTerms);
}
This is to gather the value of an input and then store the searches for a later use. But when I go to console.log state.searcTerms, the array is one version behind. Basically, if I search for "Pears", the console shows the initial value of 'test', but when I search for "Apples" following it, then the array of state shows "test" , "Pears". How can I get it to properly reflect the state values?