CODEWITHSUNDEEP
reactjsformsreact-hooksreact-hook-form
Katie7
Katie7

Reputation: 879

Pass value of form input to a sibling component in React

I have created a form, and as the user makes their selections I would like to pass the value of the form input to a sibling component in real time.

I am using react-hook-form and am successfully able to use watch to see what values the user is entering, but I only know how to pass this to a child, not a sibling.

App.js

This is the parent

import React from 'react'
import Form from './Form';
import Message from './Message';

const App = () => {
  return (
     <div>
           <Form />
           <Message/>
     </div>
  );
};
export default App;

Form.js

This is the child. 

import React from 'react';
import { useForm } from 'react-hook-form';
import { Select, MenuItem } from '@material-ui/core';
import { Controller } from 'react-hook-form';

function Form() {

const {control, watch } = useForm();    
const watchDiet = watch('diet');

return(
   <form>
          <label htmlFor="diet">Dietary requirements</label>
          <Controller
            as={
              <Select name="diet">
                  <MenuItem value="meat">Meat eater</MenuItem>
                  <MenuItem value="veggie">Vegetarian</MenuItem>
                  <MenuItem value="vegan">Vegan</MenuItem>
                ))}
              </Select>
            }
            control={control}
            name="diet"
            id="diet"
          />

    </form>
);
}
export default Form;

Message.js

This is a sibling of the child. I would like to pass the values into this component

import React from 'react';
const Message= (props) => {
  return (
      <div>
           If the user selects "Meat eater" in Form.js I want to 
           pass the value "meat" into this component
       </div>);
};
export default Message;

I'm quite new to React, so struggling to think how to do this. Wny guidance would be much appreciated.

Many thanks,

Katie

Upvotes: 3

Views: 4158

Answers (1)

Adam Jeliński
Adam Jeliński

Reputation: 1788

What you could do is put your useForm() hook inside the App.js so it's accessible for both of the children:

App.js

import React from 'react'
import Form from './Form';
import Message from './Message';
import { useForm } from 'react-hook-form';

const App = () => {
    const { watch, control } = useForm();    

    return (
        <div>
            <Form 
                watch={watch}
                control={control}
            />
            <Message
                watch={watch}
            />
        </div>
    );
};
export default App;

Form.js

import React from 'react';
import { useForm } from 'react-hook-form';

const Form = ({ watch, control }) => {
    const watchDiet = watch('diet');

    return(
        <form>
            <label htmlFor="diet">Dietary requirements</label>
            <Controller
                as={
                    <Select name="diet">
                        <MenuItem value="meat">Meat eater</MenuItem>
                        <MenuItem value="veggie">Vegetarian</MenuItem>
                        <MenuItem value="vegan">Vegan</MenuItem>
                    </Select>
                }
                control={control}
                name="diet"
                id="diet"
            />

        </form>
    );
}
export default Form;

Upvotes: 5

Related Questions