Skip to main content

Posts

Showing posts from January, 2021

part 5 - usecontext 1

 ----------------------------- app.js import React , { useState , useEffect } from 'react' ; import './App.css' import ComponentC from './ComponentE' ; export const UserContext = React . createContext () export const SalaryContext = React . createContext () const App = () => { return ( <div className = "App" > < UserContext.Provider value = { 'john doe' } > < SalaryContext.Provider value = { "12345" } > < ComponentE /> </ SalaryContext.Provider > </ UserContext.Provider > </div> ); } export default App ; //useEffect runs after every render of component ComponentF.js import React , { useContext } from 'react' import { UserContext , SalaryContext } from './App' function ComponentF () { console . log ( "C F" ) const user = useContext ( UserContext ) const salary = useContex...

part 4, fetch data with useEffect axios

--------------------------------------------------------------------------   import React , { useState , useEffect } from 'react' ; import axios from 'axios' const DataPull = () => { const [ id , setId ] = useState ( 1 ) const [ post , setPost ] = useState ({}) const [ buttonid , setButtonid ] = useState ( 1 ) const handleClick = () => { console . log ( "button id set" ) setButtonid ( id ) } useEffect (() => { console . log ( "normal id " + id ) console . log ( "button id " + buttonid ) axios . get ( `https://jsonplaceholder.typicode.com/posts/ ${ buttonid } ` ). then ( res => { setPost ( res . data ) }). catch ( err => { console . log ( err ) setPost ({ title : "no data" }) }) }, [ buttonid ]) return ( <div> <input type = "text" ...