CODEWITHSUNDEEP
reactjsreact-props
vincent05996
vincent05996

Reputation: 171

React : retrieve the state of a child component

I am trying to retrieve the value of the input in my Input component, to assign it to my user object in the parent component.

Here is my user object and my JSX:

const Form = ({ form }) => {
  const [inputValue, setInputValue] = useState("");

  const user = {
    user_firstname: "OO",
    user_lastname: "OO",
    user_email: "lOOl0jyyv",
    user_password: "OO"
  };

  return (
    <form className="form" onSubmit={callApi}>
      <Input
        key={uuidv4()}
        className="input_container"
        type="text"
        placeholder="Prénom"
        id="firstname"
        name="firstname"
        min="2"
        max="40"
      />
      <Input
        key={uuidv4()}
        className="input_container"
        type="text"
        placeholder="Nom"
        id="lastname"
        name="lastname"
        min="2"
        max="60"
      />
      <Input
        key={uuidv4()}
        className="input_container"
        type="email"
        placeholder="Votre adresse mail"
        id="email"
        name="email"
      />
      <Input
        key={uuidv4()}
        className="input_container"
        type="password"
        placeholder="Mot de passe"
        id="password"
        name="password"
        min="10"
        max="32"
      />
      <Input
        key={uuidv4()}
        className="input_container"
        type="password"
        placeholder="Confirmez le mot de passe"
        id="verify-password"
        name="verify-password"
        min="10"
        max="32"
      />
      <Button name="Inscription" />
    </form>
  );
};

Each has its own state, I would like to be able to retrieve it from the parent component to assign them to my "user" object. This is my Input component :

const Input = ({
  className,
  type,
  id,
  name,
  placeholder,
  min,
  max,
  icon1,
  icon2
}) => {
  const inputHandler = e => {
    setInputValue(e.target.value);
  };

  const [inputValue, setInputValue] = useState("");

  return (
    <div className={className}>
      <input
        className="testt"
        type={type}
        id={id}
        name={name}
        placeholder={placeholder}
        minLength={min}
        maxLength={max}
        required
        value={inputValue}
        onChange={inputHandler}
      />
      {icon1 && (
        <div className="icons_container">
          <FontAwesomeIcon icon={icon1} />
          <FontAwesomeIcon icon={icon2} />
        </div>
      )}
    </div>
  );
};

Upvotes: 0

Views: 45

Answers (2)

Aniket Suryavanshi
Aniket Suryavanshi

Reputation: 1584

You can pass onChange handler function as a prop from parent to child. This function will set value for user when child (Input) component invokes the function.

Changes needed for parent component:

...
  const [user, setUser] = React.useState({
    user_firstname: "OO",
    user_lastname: "OO",
    user_email: "lOOl0jyyv",
    user_password: "OO"
  });

  return (
    <form className="form" onSubmit={callApi}>
      <Input
        key={uuidv4()}
        className="input_container"
        type="text"
        placeholder="Prénom"
        id="firstname"
        name="firstname"
        min="2"
        max="40"
        onChange={value => setUser({ ...user, user_firstname: value })}
      />
...

Changes needed for Input component:

const Input = ({
  className,
  type,
  id,
  name,
  placeholder,
  min,
  max,
  icon1,
  icon2,
  onChange
}) => {
  const inputHandler = e => {
    setInputValue(e.target.value);
    onChange(e.target.value);
  };
...

Upvotes: 0

zS1L3NT
zS1L3NT

Reputation: 500

Why not define the state in the parent element, then pass a reference to the state in the props of the child? In your case, place the input state of all the <Input /> components in the <Form /> component and pass each state to its respective input field.

Upvotes: 1

Related Questions