state = { term: "", password: "" };
<input type="text" placeholder="Enter text to search" value={this.state.term} onChange={(e) =>{this.setState({ term: e.target.value });}} />
convert functional App parent component to a class based component and grab the event using a callback
onSearchSubmit(term) { console.log(term); }
render() { return (
use the props inside the child to grab the value from user input and pass up the hierarchy
this.props.onSubmit(this.state.term);
React App --> AJAX Client ---> Send request with data ---> API ---> response back to AJAX client
- axios - npm package
- fetch - built in modern browsers
axios.get("https://api.unsplash.com/search/photos", { params: { query: term }, headers: { Authorization: "Client-ID API_Access_Key", }, });
Either use async await or .then() to return the promise returned
Async- await
async onSearchSubmit(term) {
const resopnse = await axios.get('',{})
}
.then
onSearchSubmit(term){
axios.get('',{}).then();
}
export default axios.create({ baseURL: "https://api.unsplash.com", headers: { Authorization: "Client-ID API_Access_Key", }, });
Adding constructor to add ref for DOM access
constructor(props) { super(props); this.state = { spans: 0 }; // Accessing DOM with React refs this.imageRef = React.createRef(); }
Using ref in JSX tag
< Img ref={this.imageRef} alt={description} src={urls.regular} />