score:1

Accepted answer

i corrected the code and now it works!

  1. handlefromcert in app.js should receive name and value;
  2. value2 in the panel component in app.js is passed with an error;
  3. handlefromcert in certifications.js setvalue changes incorrectly.

certifications.js

import react, { usestate } from "react";

const certifications = (props) => {
  const [value, setvalue] = usestate({
    value1: "",
    value2: ""
  });

  const handlefromcert = ({ target: { value, name } }) => {
    setvalue(prevstate => ({ ...prevstate, [name]: value }));
    props.handlefromcert(name, value);
  };

  return (
    <div>
      <input name="value1" onchange={handlefromcert} />
      <input name="value2" onchange={handlefromcert} />
      <div>
        inside certificate
        <div>{value.value1}</div>
        <div>{value.value2}</div>
        certificate ends
      </div>
    </div>
  );
};

export default certifications;

app.js

import react, { usestate } from "react";
import certifications from "./certifications";
import panel from "./panel";

const app = () => {
  const [value, setvalue] = usestate({
    value1: "",
    value2: ""
  });

  const handlefromcert = (name, value) =>
    setvalue((prevstate) => ({ ...prevstate, [name]: value }));

  return (
    <div>
      {value.value1}
      {value.value2}
      <certifications handlefromcert={handlefromcert} />
      <panel value1={value.value1} value2={value.value2} />
    </div>
  );
};

export default app;

score:0

the problem is that you're not passing the event as the argument, you're passing the value and your function is expecting the event. in your certification component change this:

  const handlefromcert = (e) => {
   setvalue({
    [e.target.name]: e.target.value
   });
   props.handlefromcert((e.target.name, e.target.value));
  };

to this:

  const handlefromcert = (e) => {
   setvalue({
    [e.target.name]: e.target.value
   });
   props.handlefromcert(e);
  };

your function handlefromcert is expecting the event, and you're just passing the value which is a string and cannot be destructured like the event.

here's the sandbox working for me: https://codesandbox.io/s/zen-paper-gil-forked-r01fh


Related Query

More Query from same tag