Question 252727 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How to change state of component from outside of component

new to nextjs (and react), i am trying to change the state of component from outside of component,

basically i am conditionally rendering html in component, and i have one button in component which calls a function, and set the isSubmitted = true now if isSubmitted is true render the submitted component, if false then render button component

and we can’t use hooks outside the component!?
is there any way we can do this without hooks?

sample code:

let isSubmitted = false;
export default function ConditionalRenderingExample() {

   <>
      { (isSubmitted) && <h1> submitted</h1>}
      { (!isSubmitted) && <button onClick{()=>submitFunction()} > submit </button>}
   </>
}

function submitFunction(){
  isSubmitted = true;
}
Tags:

3

Answers


  1. 0

    It is recommended use useState for state changes in react instead of the way you are using it. You can use it like below,

    const [isSubmitted, setIsSubmitted] = useState(false);

    In the submitFunction() use can set the state like below,

    const submitFunction = () => {
    setIsSubmitted(true);
  };
    Login or Signup to reply.
  2. 0

    The two things you mentioned are invalid in React,

    1. Any variable that will change should be a state in React, you cannot change the state of a component outside of it as React will not pick up the changes and re-render the vDOM

    If the state lives only inside this component, i.e. it will be used and changed only here, use useState

    You have to either pass in the state you would like to change as props into the component and update that variable in another component if it will be changed outside of this component,

    or use a state management library, I would recommend you start with React Context as a starting point if that’s what you are looking for

    Tutorial reference: https://react.dev/learn/sharing-state-between-components

    1. Yes you have to use hooks inside the components, but it is not the only way to share state between components (in fact it is not even the way to share state)
    Login or Signup to reply.
  3. 0

    First of all, I would consider changing a component’s state from the outside to be an antipattern.
    So if you encounter a situation like that I would question the approach. Maybe there is another way of doing it?

    Regarding your example I think there is a nice way of handling it:

    1. I would track the state in the parent and only pass it in as a prop.
    2. think about conceptually what the variable "isSubmitted" actually does in your component. Does it only show something maybe? Then name the prop accordingly.
    3. create a prop called onSubmit that takes a function. Then call this in your onClick handler
    4. the parent should be the only component handling the state, the child should not have any state at all.

    In the end, the parent component can look something like this:

     const MyParent = ()=>{
        const [isSubmitted,setIsSubmitted] = useState(false);
        const submit = ()=>setIsSubmitted(true);
        return <ConditionalRenderingExample renderButton={isSubmitted} onSubmit={submit}>;
    }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search