React Send State Value to Another Component - reactjs

Question

I want to send State value to another component. They are at same directory. Basically I want to get "selectedvalue" from "Conversation.js" to "Openconversation.js".
Everything's fine but I just need to send that State value (selectedvalue) to Openconversation.js
./components/Conversation.js:
import React, {useState} from 'react'
import { ListGroup } from 'react-bootstrap'
import { useConversations } from '../contexts/ConversationsProvider';
export default function Conversations() {
const { conversations, selectConversationIndex } = useConversations()
**const [selectedvalue, setSelectedValue] = useState('')**
return (
<ListGroup variant="flush">
{conversations.map((conversation, index) => (
<ListGroup.Item
key={index}
action
onClick={() => {selectConversationIndex(index) && setSelectedValue(conversation.recipients.map(r => r.name).join(', '))} }
active={conversation.selected}
>
{conversation.recipients.map(r => r.name).join(', ')}
</ListGroup.Item>
))}
</ListGroup>
)
}
./components/Openconversation.js:
import React, { useState, useCallback, useEffect } from 'react'
import { Form, InputGroup, Button } from 'react-bootstrap'
import { useConversations } from '../contexts/ConversationsProvider';
import Axios from 'axios';
export default function OpenConversation() {
const [text, setText] = useState('');
const [curuser, setCurUser] = useState('');
const [oldchats, setOldChats] = useState([]);
const setRef = useCallback(node => {
if (node) {
node.scrollIntoView({ smooth: true })
}
}, [])
useEffect(() => {
Axios.get('http://localhost:3001/api/get').then((response) =>{
setOldChats(response.data);
})
}, [])
useEffect(()=>{
fetch('http://localhost:8000/api/current_user/', {
headers: {
Authorization: `JWT ${localStorage.getItem('token')}`
}
})
.then(res => res.json())
.then(json => {
setCurUser(json.id);
});
},[])
const { sendMessage, selectedConversation } = useConversations()
function handleSubmit(e) {
e.preventDefault()
sendMessage(
selectedConversation.recipients.map(r => r.id),
text,
selectedConversation.recipients.map(r => {
Axios.post("http://localhost:3001/api/insert", {
content: text,
sender: curuser,
recipient: r.id,
}).then(() => {
alert("saved on MySQL Database!");
});
})
)
setText('')
}
return (
<div className="d-flex flex-column flex-grow-1">
{selectedConversation.messages.map((message, index) => {
const lastMessage = selectedConversation.messages.length - 1 === index
return (
<div>
{oldchats.map(val => {
##### I NEED THAT SELECTEDVALUE DATA FROM CONVERSATION.JS ########
return (val.sender== curuser && val.recipient == selectedvalue) ?
<h2>{val.content}</h2>
:
<div></div>
})}
</div>
)
})}
</div>
</div>
<Form onSubmit={handleSubmit}>
<Form.Group className="m-2">
<InputGroup>
<Form.Control
as="textarea"
required
value={text}
onChange={e => setText(e.target.value)}
/>
<InputGroup.Append>
<Button type="submit">Send</Button>
</InputGroup.Append>
</InputGroup>
</Form.Group>
</Form>
</div>
)
}

Answer 1

It looks like in your Openconversation.js file you're not importing useContext from react and then assigning it to something like:
const conversationProviderContext = useContext(ConversationsProvider);
Also make sure that you're using the <ConversationsProvider.Provider/> component higher up above the <Openconversation/> component.
You should probably refer to the docs: https://reactjs.org/docs/context.html