update state of child component from parent component using react hooks - reactjs

Question

This is how my RespMessages component looks like:
import React, { useState } from "react";
import { Message } from "semantic-ui-react";
function RespMessages() {
const [message, setMessage] = useState("This is a success message");
return (
<Message positive>
<Message.Header>{message}</Message.Header>
</Message>
);
}
export default RespMessages;
This is how I am using RespMessages component inside a different component.
function CreateChannel() {
return (
<Container>
<RespMessages />
</Container>
}
This works fine and I can see This is a success message when the page renders.
What I am not able to figure out is how do I call setMessage of RespMessages component from CreateChannel component.
Can you please help?
P.S.: I am react newbie so jargons of react are probably off.

Answer 1

You can do it using useImperativeHandle. Here is an example.
let RespMessages = forwardRef((props, ref) => {
const [message, setMessage] = useState("This is a success message");
const inputRef = useRef();
useImperativeHandle(ref, () => ({
setMessage: (msg) => setMessage(msg)
}));
return <div>{message}</div>;
});
function App() {
// In order to gain access to the child component instance,
// you need to assign it to a `ref`, so we call `useRef()` to get one
const childRef = useRef();
return (
<div>
<RespMessages ref={childRef} />
<button onClick={() => childRef.current.setMessage('hey')}>Click</button>
</div>
);
}
As stated in the docs, this approach should be rarely used. Also consider approaches in other answers.

Answer 2

In react if you want something to change in the Child component depending on the Parent component you have to lift the state up to the parent component. If you want to differentiate between what should be state and what should be props and where should the state reside then its simple to figure out.
State: Keep the state (message) in the component where the data will change. In this case CreateChannel component.
Props: The components that are dependent on that state (message) should get the state as Props. In this case RespMessages component.
setState Methods: Now in case the child also wants to be able to set the state (message) then you can also pass the setMessage down as prop from CreateChannel to RespMessages`.
The react docs have a very good explanation for all this stuff. Please check it out if needed.
RespMessages.jsx
import React from "react";
import { Message } from "semantic-ui-react";
function RespMessages({message}) {
return (
<Message positive>
<Message.Header>{message}</Message.Header>
</Message>
);
}
export default RespMessages;
CreateChannel.jsx
import React, { useState } from "react"
import { Container } from "semantic-ui-react"
function CreateChannel() {
const [message, setMessage] = useState("")
return (
<Container>
<RespMessages message={message} />
</Container>
)
}
export default CreateChannel

Answer 3

You don't. A parent company generally should not know about the implementation of a child.
You can move your messages state into parent and pass the messages to child as props. This will change your RespMessage component from being an uncontrolled component, to a controlled component.