React - How can I set "message from me" - reactjs

Question

I have 2 states:
const [formData, setFormData] = useState({ input: null });
const [outputData, setOutputData] = useState({ output: null });
formData is coming from my < input />. So, I am writing the input data by writing. outputData is coming from my GET api call.
I need to separate input data and output data. How can I tell the function if the message is from me?
function renderMessage(message) {
//const here
if (messageFromMe) {
return <Me />;
} else {
return <You />;
}
}
function Me(props) {
return (
<li className="Messages-message currentMember">
<div className="Message-content">
Hey its me
</div>
</li>
);
}
function You(props) {
return (
<li className="Messages-message">
<div className="Message-content">
Test
</div>
</li>
);
}

Answer 1

This might be a good application for useEffect hook. The useEffect hook takes 2 arguments, a callback function (this could be your renderMessage) and an array of values. Whenever a value in the array changes, useEffect will call your function passed into the first argument. The hook itself would be inside of a higher-level component that would effectively parent your You and Me components when they are rendered by the callback of the hook.
Now we can do this:
const [formData, setFormData] = useState(null);
const [outputData, setOutputData] = useState(null);
const [lastMessageSender, setLastMessageSender] = useState("");
let messageFromMe = (lastMessageSender === "me");
useEffect(()=>{renderMessage(message)}, [lastMessageSender]);
The last piece is this - whenever you call setFormData, also call setLastMessageSender and pass in the value "me" and whenever you call setOutputData, also call setLastMessageSender and pass in the value "you" - they could be other values eventually, such as the name of the user.
You may want to have convenience functions to help you code stay DRY...
const updateMessageFromOutput = payload => {
setOutputData(payload);
setLastMessageSender("you");
}
const updateMessageFromForm = payload => {
setFormData(payload);
setLastMessageSender("me");
}