useState does not update the value on Component Re-render

by

In the following example, clicking the name change button does change the state, however that is not rendered on the UI.

The correct expected result is to change the name to "Mike":

here is SandBox

import React, { useState } from "react";
import ReactDOM from "react-dom";

import "./styles.css";


const useForm = initialValues => {
  const [values, setValues] = useState(initialValues);

  return [
    values,
    e => {
      console.log(e.target.value);
      setValues({
        ...values,
        [e.target.name]: e.target.value
      });
    }
  ]
}

let count = 0;

const Hello = (props) => {
  console.log(`Hello.props: ${props.name} `)
  const [values, handleChange] = useForm({ nameInput: props.name });
  count++
  console.log(`RenderedAmount: ${values.nameInput} : ${count}`)
  return (
  <div>
    Name: <input value={values.nameInput} onChange={handleChange} name="nameInput" /><br/>
    Hello {values.nameInput}!
  </div>
);
}

const Container = (props) => {
  const [ name, setName] = useState(props.name);
  console.log(`Container: Name is ${name}`)
  return(
    <div>
      <Hello name={name}/>
      <button onClick={()=>{setName("Mike")}}>
        Change Name
      </button>
    </div>
  )
}


const rootElement = document.getElementById("root");
ReactDOM.render(<Container name="John"/>, rootElement);

45 thoughts on “useState does not update the value on Component Re-render”

  3. Pingback: keto diet cancer

  8. Thanks for a marvelous posting! I genuinely enjoyed reading it, you’re a great author.I will
    make sure to bookmark your blog and definitely will come
    back down the road. I want to encourage you to definitely continue your great job, have
    a nice holiday weekend!

    Reply

  17. Hi there! I understand this is kind of off-topic however
    I had to ask. Does building a well-established blog like yours take a large amount of work?
    I’m brand new to blogging but I do write in my journal
    every day. I’d like to start a blog so I can share my own experience and thoughts
    online. Please let me know if you have any recommendations or
    tips for brand new aspiring blog owners. Thankyou!
    ps4 https://j.mp/3z5HwTp ps4

    Reply

  20. Heya! I know this is sort of off-topic however I needed
    to ask. Does managing a well-established blog like yours require
    a lot of work? I’m brand new to blogging but
    I do write in my journal everyday. I’d like to start a blog so I will be able to share my experience and thoughts online.
    Please let me know if you have any kind of suggestions or tips for brand new aspiring bloggers.
    Thankyou! scoliosis surgery https://coub.com/stories/962966-scoliosis-surgery scoliosis surgery

    Reply
  23. Pingback: gay old men dating sites
  26. Pingback: sex games gamejolt

Leave a Comment