I have created search box in react where data is searchable form wordpress post api. i want to show this search results in separate page. from below code the page is redirecting to blank page
search.js
import axios from 'axios';
import React, { Component } from 'react';
import { Button } from 'react-bootstrap';
import { Redirect } from '@reach/router';
class Search extends Component {
constructor(props) {
super(props);
this.state = {
results: [],
term: '',
};
this.submit = this.submit.bind(this);
this.changeTerm = this.changeTerm.bind(this);
}
changeTerm(event) {
this.setState({ term: event.target.value });
}
submit(event) {
let url = 'https://example.com/wp-json/wp/v2/posts?_embed&search=' + encodeURI(this.state.term) + '&per_page=100';
axios.get(url)
.then(response => {
let data = {
results: response.data,
};
this.setState(data);
})
.catch(error => console.log(error));
}
render() {
return (
<div>
<form onSubmit={this.submit} action="search/results">
<input onChange={this.changeTerm} />
<Button type="submit" bsStyle="primary">Find</Button>
</form>
{this.state.results.length > 0 &&
<Redirect to={{
pathname: '/search/results',
state: { results: this.state.results }
}} />
}
</div>
);
}
}
export default Search;
result.js
