Htykuut

I am building a react-redux app where after a citation is generated the user has the option to save the citation to a separate list. I import Modal from 'react-modal' and then dispatch to the store information about the citation. It then redirects me to the citation list successfully. However, if I go to add another citation and click one of the header buttons (one going home or the other going to the citation list) before triggering the Modal, then I get the error "Cannot read property of state of null." If I remove the modal, then I do not get the error so I know it is related to the modal. Any help would be greatly appreciated. Here is the relevant code:

<SaveModal

  fullCitation={this.state.fullCitation}

  saveCitation={this.state.saveCitation}

  handleClearSaveCitation={this.handleClearSaveCitation}

  history={this.props.history}

  createdAt={this.state.createdAt}

  type={this.state.type} 

  note={this.state.note}

  dispatch={this.props.dispatch}

  handleAddType={this.handleAddType}

  handleAddNote={this.handleAddNote}

/>



import React from 'react';

import Modal from 'react-modal';

import { connect } from 'react-redux';

import { addCitation } from '../actions/citations';



const SaveModal = (props) => (

  <Modal

    isOpen={props.saveCitation}

    onRequestClose={props.handleClearSaveCitation}

    contentLabel="SaveModal"

    closeTimeoutMS={200}

    className="modal"

  >

    <h3>{props.fullCitation}</h3>

    <h3>{props.createdAt}</h3>

    <input 

      autoFocus 

      className="text-input" 

      type="text" 

      id="type" 

      placeholder="Add Type (Optional)"

      onChange={props.handleAddType}

    />

    <textarea

      id="textarea"

      className="text-input" 

      placeholder="Add Note (Optional)"

      onChange={props.handleAddNote}

    >

    </textarea>

    <button 

      className="button"

      onClick={() => {

        props.dispatch(addCitation({ 

          fullCitation: props.fullCitation, 

          createdAt: props.createdAt, 

          type: props.type, 

          note: props.note 

        }));

        props.history.push('/CitationList');

      }}

    >Save</button>

  </Modal>

);



export default connect()(SaveModal);

UPDATE:

The state is defined in the parent component and then passed down to Modal. A bunch of methods follow that manipulate the state before it is passed down to child components such as AddParties.

import React from 'react';

import term from '../term';

import AddParties from '../components/AddParties';

import AddOhioVolume from '../components/AddOhioVolume';

import AddRegionalVolume from '../components/AddRegionalVolume';

import AddYear from '../components/AddYear';

import AddPinpoint from '../components/AddPinpoint';

import AddWebcite from '../components/AddWebcite';

import CiteCase from '../components/CiteCase';

import Citation from '../components/Citation';

import RemoveCitation from '../components/RemoveCitation';

import CopyCitation from '../components/CopyCitation';

import SaveCitation from '../components/SaveCitation';

import moment from 'moment';

import SaveModal from '../components/SaveModal';





export default class SupremePost extends React.Component {

  state = {

    partyOne: "",

    partyTwo: "", 

    ohioVolume: "",

    ohioReporter: "",

    ohioFirstPage: "",

    regionalVolume: "",

    regionalReporter: "",

    regionalFirstPage: "",

    year: "",

    pinpointNumber: "",

    pinpointDisplay: "",

    webcite: "",

    parties: "",

    citation: "",

    fullCitation: "",

    createdAt: "",

    saveCitation: false,

    type: "None",

    note: "None"

  };

Apparently, I was using an outdated version of react-modal. I updated it, and now I have no further issues.