1 Use State while using in object should be approached like this; export default function App () { const [greeting, setGreeting] = useState({ greet: "Hello, World" }); console.log(greeting, setGreeting); function updateGreeting() { const newGreeting = {...greeting}; newGreeting.greet = "Hello, World-Wide Web" ; setGreeting(newGreeting); } Here, the newGreeting takes all the previous objects then manipulates the greet so that only greet is modified and not other object. 2 Another way is using prevState; export default function App () { const [greeting, setGreeting] = useState( ...
1 We use context API to provide context which is available to all the components of the App directly. 2 We use a Context Provider that wraps the App.js which means it wraps the whole components. So that the context can be made available to all the components. check link: https://youtu.be/aAcI_FdfkA8 Eg: In UserContext file located in context in src of React Practises; Create a constant which assigns to React,createContext. Create a file named Context Provider that provides the context to the Usercontext Syntax of Context Provider: import React , { useState } from "react" ; import UserContext from "./UserContext" ; const UserContextProvider = ({ children }) => { const [ user , setUser ] = useState ( null ); return ( < UserContext.Provider > { children } </ UserContext.Provider > ) }; export default UserContextProvider ;
Comments
Post a Comment