Can't update parent component

Question

I'm trying to edit an input value in a child component and send to the parent : https://codesandbox.io/s/sleepy-rain-skoss?file=/src/Editlabel.js:0-389

Parent:

import "./styles.css";
import EditLabel from "./Editlabel";
import { useEffect, useState } from "react";

export default function App() {
  const [newName, setNewName] = useState();

  useEffect(() => {
    console.log("newName", newName);
  }, [newName]);

  return (
    <div className="App">
      <EditLabel
        value={"hello"}
        click={(changedName) => {
          setNewName(changedName);
        }}
      />
    </div>
  );
}

Child:

import React, { useState } from "react";

const EditLabel = ({ value, click }) => {
  const [name, setName] = useState(value);

  return (
    <>
      <input type={"text"} placeholder={name}></input>
      <button
        onClick={(e) => {
          setName(e.target.value);
          click(name);
        }}
      >
        Edit
      </button>
    </>
  );
};

export default EditLabel;

However, the console logs "hello" and then it just logs empty strings. How can I make it work?

Does this answer your question? [How to get the value of an input field using ReactJS?](https://stackoverflow.com/questions/36683770/how-to-get-the-value-of-an-input-field-using-reactjs) — Emile Bergeron, Feb 09 '21 at 16:13

score 1 · Answer 1 · answered Feb 09 '21 at 16:14

Change EditLabel to use a ref to capture the input value:

const EditLabel = ({ value, click }) => {
  const inputRef = useRef(null);
  return (
    <>
      <input ref={inputRef} type={"text"} placeholder={value}></input>
      <button
        onClick={() => {
          click(inputRef.current.value);
        }}
      >
        Edit
      </button>
    </>
  );
};

Update App to use the values it gets via the click callback:

export default function App() {
  const [newName, setNewName] = useState("hello");

  useEffect(() => {
    console.log("newName", newName);
  }, [newName]);

  return (
    <div className="App">
      <EditLabel
        value={newName}
        click={(changedName) => {
          setNewName(changedName);
        }}
      />
    </div>
  );
}

score 1 · Accepted Answer · answered Feb 09 '21 at 16:16

1

try this on your child's input box

<input type={"text"} placeholder={name} onChange={(e) => setName(e.target.value)}>

answered Feb 09 '21 at 16:16

Bhumit 070

416
4
12

Can't update parent component

2 Answers2