Skip to content

prashantyadav1397/React-Handling-User-Inputs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Handling User Inputs using Forms and Events

Using state to handle controlled event from user input


state = { term: "", password: "" };
<input type="text" placeholder="Enter text to search" value={this.state.term} onChange={(e) =>{this.setState({ term: e.target.value });}} />

props communicate from parent to child state

Handling Communication of child to parent

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);

Data loading from the API

React App --> AJAX Client ---> Send request with data ---> API ---> response back to AJAX client

  1. axios - npm package
  2. fetch - built in modern browsers

getting Data using axios

axios.get("https://api.unsplash.com/search/photos", { params: { query: term }, headers: { Authorization: "Client-ID API_Access_Key", }, });

Async await and .then()

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(); }

Creating default properties for axios

export default axios.create({ baseURL: "https://api.unsplash.com", headers: { Authorization: "Client-ID API_Access_Key", }, });

Accessing DOM using React ref

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} />

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published