componentWillReceiveProps is not triggered on react-router Link

react
1

So I have this component. It receives props and in the componentWillReceiveProps I set those props as state to fill in some form details. And it works when I manually type a url like this http://localhost:3000/dashboard/emailpreview/SKXj7t86agAzmRefG
It works great! However if I click on a react-router’s Link that points to that url, the componentWillReceiveProps is not triggered at all, thus my form fields are not prefilled. But again if I perform a manual refresh there everything works. Why does this happen? What’s the problem? Why componentWillReceiveProps doesn’t trigger on Link?

import React, { Component } from 'react'
import { browserHistory } from 'react-router'
import { Editor } from 'react-draft-wysiwyg'
import { convertToRaw } from 'draft-js'
import { createContainer } from 'meteor/react-meteor-data'
import { Emails } from '../../../../../imports/collections/emails/Emails'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import draftToHtml from 'draftjs-to-html'
import { stateFromHTML } from 'draft-js-import-html'
import _ from 'lodash'

class EmailEditor extends Component {
  constructor (props) {
    super(props)
    this.state = {
      name: '',
      to: '',
      subject: '',
      html: '',
      error: ''
    }
  }

// TODO: If there is id then fill in the information
        // TODO: Subscribe and find and fill in with state
  componentWillReceiveProps (nextProps) {
    console.log('acsdcdsc', nextProps.email.name)
    this.setState({name: nextProps.email.name, to: nextProps.email.to, subject: nextProps.email.subject})
  }
  handleChange (event) {
    const changedOne = event.target.name
    const newValue = event.target.value
    const newState = {}
    newState[changedOne] = newValue
    this.setState(newState)
  }
  saveEmail () {
    const self = this
    console.log('saveEmail')
    const { emailId } = this.props.params
    console.log(emailId)
    console.log('email')
    const { name, to, subject, attachments, editorState } = this.state
    console.log('editorState', editorState)
    if (_.isEmpty(editorState)) {
      self.setState({error: 'Please fill requaired fields'})
      return
    }
    const rawContentState = convertToRaw(editorState.getCurrentContent())
    const html = draftToHtml(rawContentState)
    console.log('html', html)
    const email = {
      emailId,
      name,
      to,
      subject,
      html,
      attachments // TODO: figure out how to send this
    }
    if (emailId === 'new') {
      Meteor.call('emails.insert', email, (err, emailId) => {
        if (err) {
          self.setState({error: 'Please fill requaired fields'})
          return
        }
        if (emailId) console.log(emailId)
        browserHistory.push(`/dashboard/emailpreview/${emailId}`)
      })
    } else {
      Meteor.call('emails.update', email, (err, emailId) => {
        if (err) console.log(err)
        if (emailId) console.log(emailId)
        browserHistory.push(`/dashboard/emailpreview/${emailId}`)
      })
    }
  }
  renderEditor () {
    return(
        <div className="form-group">
          <div><label style={{display: 'block', color: 'red', marginBottom: '10px'}}>*</label><input value={this.state.name} onChange={this.handleChange.bind(this)} type="text" name="name" placeholder="Email Name" /></div>
          <div><label style={{display: 'block', color: 'red', marginBottom: '10px'}}>*</label><input value={this.state.to} onChange={this.handleChange.bind(this)} type="text" name="to" placeholder="To" /></div>
          <div><label style={{display: 'block', color: 'red', marginBottom: '10px'}}>*</label><input value={this.state.subject} onChange={this.handleChange.bind(this)} type="text" name="subject" placeholder="Subject" /></div>
          <div><span style={{display: 'block', color: 'red', margin: '10px'}}>{this.state.error}</span></div>
          <Editor
            toolbarClassName="wysiwig-toolbar"
            wrapperClassName="wysiwig-wrapper"
            editorClassName="wysiwig-editor"
            onEditorStateChange={(editorState) => {
              this.setState({
                editorState
              })
              console.log(editorState)
            }}
            />
          <button onClick={this.saveEmail.bind(this)} className="btn btn-success">Save</button>
          <button className="btn btn-primary">Send</button>
          <button className="btn btn-primary">Test</button>
        </div>
    )
  }
  render () {
    console.log('listItems1010', this.state)
    console.log('listItems prop11010', this.props.email)
    return (
      <div className="EmailEditor">
      {this.renderEditor()}
      </div>
    )
  }
}
// https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp
// {/* editorState={editorState}
// toolbarClassName="home-toolbar"
// wrapperClassName="home-wrapper"
// editorClassName="home-editor"
// onEditorStateChange={this.onEditorStateChange}
// uploadCallback={uploadImageCallBack} */}
export default createContainer((props) => {
  const {emailId} = props.params
  Meteor.subscribe('emails')
  return {email: Emails.findOne(emailId)}
}, EmailEditor)
2

react-router uses context. In your, componentWillReceiveProps(nextProps) you can track it to ensure re-rendering using componentWillReceiveProps(nextProps, nextContext).

1 Like
3

But email comes from createContainer…where are nextProps?!

4

It still doesn’t work :frowning:

5

Have you subscribed to the context? https://facebook.github.io/react/docs/context.html

6

Do you mean componentWillReceiveProps works only on update?

7

Note that with react-router 4, there’s a handy HOC that eases react-router’s context integration as props: https://reacttraining.com/react-router/#withrouter

Very handy!

8

As it turned out componentWillReceiveProps is not triggered during initial rendering. It is only triggered on component update. So to setState on initial render I used componentDidMount for instance like this

 componentDidMount () {
    if (this.props.email) {
      this.setState({
        name: this.props.email.name,
        to: this.props.email.to,
        subject: this.props.email.subject,
        html: this.props.email.html,
        editorState: EditorState.createWithContent(stateFromHTML(this.props.email.html))
      })
    }
  }

So the final code would look like

import React, { Component } from 'react'
import { browserHistory } from 'react-router'
import { Editor } from 'react-draft-wysiwyg'
import { convertToRaw, EditorState } from 'draft-js'
import { createContainer } from 'meteor/react-meteor-data'
import { Emails } from '../../../../../imports/collections/emails/Emails'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import draftToHtml from 'draftjs-to-html'
import { stateFromHTML } from 'draft-js-import-html'
import _ from 'lodash'

class EmailEditor extends Component {
  constructor (props) {
    super(props)
    this.state = {
      name: '',
      to: '',
      subject: '',
      html: '',
      error: '',
      editorState: EditorState.createEmpty()
    }
  }

  componentWillReceiveProps (nextProps, nextContext) {
    console.log('componentWillReceiveProps nextProps.email.name', nextProps.email.name)
    this.setState({
      name: nextProps.email.name,
      to: nextProps.email.to,
      subject: nextProps.email.subject,
      html: nextProps.email.html,
      editorState: EditorState.createWithContent(stateFromHTML(nextProps.email.html))
    })
  }
  componentDidMount () {
    if (this.props.email) {
      this.setState({
        name: this.props.email.name,
        to: this.props.email.to,
        subject: this.props.email.subject,
        html: this.props.email.html,
        editorState: EditorState.createWithContent(stateFromHTML(this.props.email.html))
      })
    }
  }
  handleChange (event) {
    const changedOne = event.target.name
    const newValue = event.target.value
    const newState = {}
    newState[changedOne] = newValue
    this.setState(newState)
  }
  saveEmail () {
    const self = this
    console.log('saveEmail')
    const { emailId } = this.props.params
    console.log(emailId)
    console.log('email')
    const { name, to, subject, attachments, editorState } = this.state
    console.log('editorState', editorState)
    if (_.isEmpty(editorState)) {
      self.setState({error: 'Please fill requaired fields'})
      return
    }
    const rawContentState = convertToRaw(editorState.getCurrentContent())
    const html = draftToHtml(rawContentState)
    console.log('html', html)
    const email = {
      emailId,
      name,
      to,
      subject,
      html,
      attachments // TODO: figure out how to send this
    }
    if (emailId === 'new') {
      Meteor.call('emails.insert', email, (err, emailId) => {
        if (err) {
          self.setState({error: 'Please fill requaired fields'})
          return
        }
        if (emailId) console.log(emailId)
        browserHistory.push(`/dashboard/emailpreview/${emailId}`)
      })
    } else {
      Meteor.call('emails.update', email, (err, result) => {
        if (err) console.log(err)
        if (result) console.log('update result', result)
        browserHistory.push(`/dashboard/emailpreview/${emailId}`)
      })
    }
  }
  renderEditor () {
    return (
      <div className="form-group">
        <div><label style={{display: 'block', color: 'red', marginBottom: '10px'}}>*</label><input
          value={this.state.name}
          onChange={this.handleChange.bind(this)}
          type="text"
          name="name"
          placeholder="Email Name" /></div>
        <div><label style={{display: 'block', color: 'red', marginBottom: '10px'}}>*</label><input
          value={this.state.to}
          onChange={this.handleChange.bind(this)}
          type="text"
          name="to"
          placeholder="To" /></div>
        <div><label style={{display: 'block', color: 'red', marginBottom: '10px'}}>*</label><input
          value={this.state.subject}
          onChange={this.handleChange.bind(this)}
          type="text"
          name="subject"
          placeholder="Subject" /></div>
        <div><span style={{display: 'block', color: 'red', margin: '10px'}}>{this.state.error}</span></div>
        <Editor
          editorState={this.state.editorState}
          toolbarClassName="wysiwig-toolbar"
          wrapperClassName="wysiwig-wrapper"
          editorClassName="wysiwig-editor"
          onEditorStateChange={(editorState) => {
            this.setState({
              editorState
            })
            console.log('editorState', editorState)
            console.log('this.state', this.state)
          }}
        />
        <button onClick={this.saveEmail.bind(this)} className="btn btn-success">Save</button>
        <button className="btn btn-primary">Send</button>
        <button className="btn btn-primary">Test</button>
      </div>
    )
  }
  render () {
    console.log('render state', this.state)
    console.log('render props email', this.props.email)
    return (
      <div className="EmailEditor">
      {this.renderEditor()}
      </div>
    )
  }
}
// https://jpuri.github.io/react-draft-wysiwyg/#/docs?_k=jjqinp
// {/* editorState={editorState}
// toolbarClassName="home-toolbar"
// wrapperClassName="home-wrapper"
// editorClassName="home-editor"
// onEditorStateChange={this.onEditorStateChange}
// uploadCallback={uploadImageCallBack} */}

export default createContainer((props) => {
  const {emailId} = props.params
  Meteor.subscribe('emails')
  return {email: Emails.findOne(emailId)}
}, EmailEditor)