setState updates state and triggers render but I still don't see it in view

Question

I have a simple word/definition app in React. There is an edit box that pops up to change definition when a user clicks on "edit". The new definition provided is updated in the state when I call getGlossary(), I see the new definition in inspector and a console.log statement in my App render() function triggers too. Unfortunately, I still have to refresh the page in order for the new definition to be seen on screen. I would think that calling set state for this.state.glossary in the App would trigger a re-render down to GlossaryList and then to GlossaryItem to update it's definition but I'm not seeing it :(.

App.js

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      glossary: [],
      searchTerm: '',
    }

    this.getGlossary = this.getGlossary.bind(this); //not really necessary?
    this.handleSearchChange = this.handleSearchChange.bind(this);
    this.handleAddGlossaryItem = this.handleAddGlossaryItem.bind(this);
    this.handleDeleteGlossaryItem = this.handleDeleteGlossaryItem.bind(this);
    //this.handleUpdateGlossaryDefinition = this.handleUpdateGlossaryDefinition.bind(this);
  }

  getGlossary = () => {
    console.log('getGlossary fired');
    axios.get('/words').then((response) => {
      const glossary = response.data;
      console.log('1: ' + JSON.stringify(this.state.glossary));
      this.setState({ glossary }, () => {
        console.log('2: ' + JSON.stringify(this.state.glossary));
      });

    })
  }

  componentDidMount = () => {
    //console.log('mounted')
    this.getGlossary();
  }

  handleSearchChange = (searchTerm) => {
    this.setState({ searchTerm });
  }

  handleAddGlossaryItem = (glossaryItemToAdd) => {
    //console.log(glossaryItemToAdd);
    axios.post('/words', glossaryItemToAdd).then(() => {
      this.getGlossary();
    });
  }

  handleDeleteGlossaryItem = (glossaryItemId) => {
    console.log('id to delete: ' + glossaryItemId);
    axios.delete('/words', {
      data: { glossaryItemId },
    }).then(() => {
      this.getGlossary();
    });
  }

  render() {
    console.log('render app fired');
    const filteredGlossary = this.state.glossary.filter((glossaryItem) => {
      return glossaryItem.word.toLowerCase().includes(this.state.searchTerm.toLowerCase());
    });

    return (
      <div>
        <div className="main-grid-layout">
          <div className="form-left">
            <SearchBox handleSearchChange={this.handleSearchChange} />
            <AddWord handleAddGlossaryItem={this.handleAddGlossaryItem} />
          </div>
          <GlossaryList
            glossary={filteredGlossary}
            handleDeleteGlossaryItem={this.handleDeleteGlossaryItem}
            getGlossary={this.getGlossary}
          //handleUpdateGlossaryDefinition={this.handleUpdateGlossaryDefinition}
          />
        </div>
      </div>
    );
  }
}

export default App;

GlossaryItem.jsx

import React from 'react';
import EditWord from './EditWord.jsx';
const axios = require('axios');

class GlossaryItem extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isInEditMode: false,
        }
        this.glossaryItem = this.props.glossaryItem;
        this.handleDeleteGlossaryItem = this.props.handleDeleteGlossaryItem;
        this.handleUpdateGlossaryDefinition = this.handleUpdateGlossaryDefinition.bind(this);
        this.handleEditClick = this.handleEditClick.bind(this);
    }

    handleUpdateGlossaryDefinition = (updateObj) => {
        console.log('update object: ' + JSON.stringify(updateObj));
        axios.put('/words', {
            data: updateObj,
        }).then(() => {
            this.props.getGlossary();
        }).then(() => {
            this.setState({ isInEditMode: !this.state.isInEditMode });
            //window.location.reload();
        });
    }

    handleEditClick = () => {
        // display edit fields
        this.setState({ isInEditMode: !this.state.isInEditMode });
        // pass const name = new type(arguments); data up to App to handle with db
    }

    render() {
        return (
            <div className="glossary-wrapper">
                <div className="glossary-item">
                    <p>{this.glossaryItem.word}</p>
                    <p>{this.glossaryItem.definition}</p>
                    <a onClick={this.handleEditClick}>{!this.state.isInEditMode ? 'edit' : 'cancel'}</a>
                    <a onClick={() => this.handleDeleteGlossaryItem(this.glossaryItem._id)}>delete</a>
                </div>
                {this.state.isInEditMode ?
                    <EditWord
                        id={this.glossaryItem._id}
                        handleUpdateGlossaryDefinition={this.handleUpdateGlossaryDefinition}
                    /> : null}
            </div>
        );
    }
}

EditWord

import React from 'react';

class EditWord extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            definition: ''
        };

        this.handleUpdateGlossaryDefinition = this.props.handleUpdateGlossaryDefinition;
        this.handleChange = this.handleChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        let definition = event.target.value;
        this.setState({ definition });
    }

    handleSubmit(event) {
        //console.log(event.target[0].value);
        let definition = event.target[0].value;
        let update = {
            'id': this.props.id,
            'definition': definition,
        }
        //console.log(update);
        this.handleUpdateGlossaryDefinition(update);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit} className="glossary-item">
                <div></div>
                <input type="text" name="definition" placeholder='New definition' value={this.state.definition} onChange={this.handleChange} />
                <input type="submit" name="update" value="Update" />
            </form>
        );
    }
}
export default EditWord;

Thank you

Answer 1

In the constructor of GlossaryItem I set

this.glossaryItem = this.props.glossaryItem;

because I am lazy and didn't want to have to write the word 'props' in the component. Turns out this made react loose reference somehow.

If I just remove this line of code and change all references to this.glossaryItem.xxx to this.pros.glossaryItem.xxx then it works as I expect! On another note, the line of code can be moved into the render function (instead of the constructor) and that works too, but have to make sure I'm accessing variables properly in the other functions outside render.

Answer 2

One possible way I can see to fix this is to map the data to make the id uniquely identify each list item (even in case of update). We can to do this in getGlossary() by modifying the _id to _id + definition.

getGlossary = () => {
  console.log('getGlossary fired');
  axios.get('/words').then((response) => {
    // Map glossary to uniquely identify each list item
    const glossary = response.data.map(d => {
      return {
        ...d,
        _id: d._id + d.definition,
      }
    });
 
    console.log('1: ' + JSON.stringify(this.state.glossary));
    this.setState({ glossary }, () => {
      console.log('2: ' + JSON.stringify(this.state.glossary));
    });
  })
}