How can I refer to another react component? - reactjs

Question

is there a way to get component's state name, from another component?
I have a component Chat:
import ChatMessage from './ChatMessage'
class Chat extends Component {
state = {
name: 'Bob',
messages: [],
}
getStateName = function(){
return this.state.name
}
}
and another component ChatMessage:
import Chat from './Chat'
class ChatMessage extends Component{
render(){
return(
<p> {Chat.getStateName} </p>
)
}
}
I would like to get as a result 'Bob'.
I was thinking of using a function called getStateName, but it doesn't seem to work. Any idea's how I can fix that?

Answer 1

Ideally state is private and fully controlled by the component. Redux is a library that can be used to manage application wide states via an application store. Refer to redux's getting started to set your app up.

Answer 2

You are on right track to use Components, but you need some changes to look into
here is Stackblitz link for your project
your Chat.js component file will be
import React, { Component } from 'react';
class Chat extends Component {
state = {
name: 'Bob',
messages: []
};
render() {
return <p>{this.state.name}</p>;
}
}
export default Chat;
And ChatMessage.js component will be
import React, { Component } from 'react';
import Chat from './Chat';
class ChatMessage extends Component {
render() {
return <Chat />;
}
}
export default ChatMessage;

Answer 3

Here's a solution that uses a plain ES6 class to store user data, and delegates rendering to a React component.
Either create an instance of the class before accessing it:
class User {
state = {
name: "Bob",
messages: [
"Could you get cucumber from the grocery store?",
"Don't forget the tomatoes, too!",
"Scrap the tomatoes. No tomatoes.",
"Honey, let's get take away instead."
]
};
}
const user1 = new User(); // ← initialising the object instance
const App = () => (
<>
<h1> {user1.state.name} </h1>
<ul>
{user1.state.messages.map((message) => (
<li key={message}>{message}</li>
))}
</ul>
</>
);
export default App;
Or make the state static, which allows you to access it without initialisation:
class User {
static state = { // ← the state object is now static
name: "Bob",
messages: [
"Could you get cucumber from the grocery store?",
"Don't forget the tomatoes, too!",
"Scrap the tomatoes. No tomatoes.",
"Honey, let's get take away instead."
]
};
}
// no need for initialisation
// const user1 = new User();
const App = () => (
<>
<h1> {User.state.name} </h1>
<ul>
{User.state.messages.map((message) => (
<li key={message}>{message}</li>
))}
</ul>
</>
);
export default App;