CODEWITHSUNDEEP
javascriptreactjsfirebase
貝原匠
貝原匠

Reputation: 111

How to read props on event on React

I creating chat system by React and Firebase.
The data of chat stystem is managemented by Firebase RealTimeDatabase.
Now site here
URL: https://react-chat-b0e8a.firebaseapp.com/
Github: https://github.com/kaibara/React-chat

I'm trying to implement the delete button, but I do not know how to make the child component event read the parent componentthis.props. As a solution to this, I was thinking to have this.props read in front of render. But I do not know how to do it. Can you share the solution to this problem in the following code?

App.js - parenet component

import React, { Component } from 'react'
import firebase from 'firebase/app'
import { firebaseApp,firebaseDB } from './firebase/firebase'
import ChatMessage from './components/ChatMessage'

const messagesRef = firebaseDB.ref('messages')

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      text : "",
      user_name: "",
      messages: []
    }
  }
  componentWillMount() {
    messagesRef.on('child_added', (snapshot) => {
      const m = snapshot.val()
      let msgs = this.state.messages
      msgs.push({
        'text' : m.text,
        'user_name' : m.user_name,
        'key': snapshot.key
      })
      console.log({msgs})
      this.setState({
        messages : msgs
      })
      console.log(this.state.messages)
    })
  }
  render() {
    return (
      <div className="App">
        <div className="MessageList">
          <h2>メッセージログ</h2>
          {this.state.messages.map((m, i) => {
            return <ChatMessage key={i} messages={m} />
          })}
        </div>
      </div>
    )
  }
}

export default App

ChatMessage.js - child component

import React,{Component} from 'react'
import { firebaseDB } from '../firebase/firebase'

const messagesRef = firebaseDB.ref('messages')

class ChatMessage  extends Component {
  onRemoveClick(){
    messagesRef.child(this.props.messages.key).remove()
    //　I want to load `this.props.messages.key` here
  }
  render(){
    return(
      <div className="Message">
        <p>{this.props.messages.key}</p>
        <p className="MessageText">{this.props.messages.text}</p>
        <p className="MessageName" style={user}>by&nbsp;{this.props.messages.user_name}</p>
        <button className="MessageRemove" onClick={this.onRemoveClick}>削除</button>
      </div>
    )
  }
}

export default ChatMessage

Please lend me your knowledge.
Thank you.

Upvotes: 1

Views: 316

Answers (1)

Praveen Rao Chavan.G
Praveen Rao Chavan.G

Reputation: 2860

Implement the handler in your parent component and pass the reference down to child component has props

implement onRemoveClick() in App component and pass the handler refrence in `props' to ChatMessage component.

App component:

 deleteMessageHandler = (key) =>{
    const messages = [...this.state.messages];
    messages = messages.splice(key,1);
    this.setState({messages:messages});
  }

ChatMessage:

render() {
    return (
      <div className="App">
        <div className="MessageList">

          {this.state.messages.map((m, i) => {
            return <ChatMessage key={i} messages={m} deleteMessageHandler={this.deleteMessageHandler}/>
          })}
        </div>
      </div>
    )
  }

Note: Don't use the index of the map has a key to the components in the map, its an antipattern, it should be proper unique id's.

Upvotes: 2

Related Questions