How do I update my DOM when the function fires?

user_2430344 0
Viewed 44

I am doing something wrong. But I can't quite see what it is.

Admittedly I am a rookie on js/React. I have managed to fire my function each time my redux-form fields update. But I can't get the output onto the dom. Can anyone see what I am doing wrong?

My Code:

const Register = () => {
  
  var output =  "this should disappear when changed fires"
  
  const onSubmit = (formValues) => {
    console.log("formValues", formValues); //<-- fires fine.
  };

  const changed = (formValues) => {
    if (formValues?.firstName) {
        output = simpleStringify(formValues);
        console.log(output) // <-- the output is changed
        
    }
  };

  return (
    <div>
      Register Page
      <RegistrationForm onSubmit={onSubmit} onChange={changed} user={user} />
     <Highlight>{output}</Highlight> {/*  not updating */}
    </div>
  );
};

export default Register;

I am assuming, I need to 'inject' the output.

redux-form reactjs javascript
1 Answers

var output should be a state in ReactJS to update :)

in Hooks:

const [output, setOutput] = useState("this should disappear when changed fires"); 

const changed = (formValues) => {
    if (formValues?.firstName) {
        setOutput(simpleStringify(formValues));
        
        
    }
};

useEffect(() => {
   console.log(output) // <-- the output is changed
}, [output]);

This should work :)

user_129625110
Related