React Re-render on State Change

Question

const Feed = React.createClass({
getInitialState: function () {
 return {
  data: {}
 }
},

componentDidMount: function () {
axios.all([
  getAllTeams(), getAllDrivers()
]).then((results) => {
    let teams = results[0].data;
    let drivers = results[1].data;
    let newDrivers = normaliseDrivers(drivers);
    var data = normaliseData(teams, newDrivers);
    this.setState({
      data: data
    })
  })
},

sortAndRenderPanels () {
let teamsArr = Object.values(this.state.data);
teamsArr.sort(function(a,b) {
  return (a.positions[0][2016] > b.positions[0][2016])
    ? 1 : ((b.positions[0][2016] > a.positions[0][2016])
    ? -1 : 0);
});
return teamsArr.map ((data, i) => {
  return (
      <MyPanel
        key={i}
        data={data}
      />
  )
})
},

sortAlphabeticallyAndRender () {
let teamsArr = Object.values(this.state.data);
var sorted = teamsArr.sort(function(a, b){
  var textA = a.name.toUpperCase();
  var textB = b.name.toUpperCase();
  return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
});
return sorted.map((data, i) => {
  return (
    <MyPanel
      key={i}
      data={data}
    />
  )
 })
},

handleAlphabetClick (e) {
e.preventDefault();
this.sortAlphabeticallyAndRender(this.state);
this.forceUpdate(function () {
  return this.state.data;
});
},

render: function () {
const cards = this.sortAndRenderPanels();
return (
  <div id="feed">
    <Button id='sort-button' onClick={this.handleAlphabetClick} type="button" className="btn btn-warning" aria-label="Left Align">
      <span > Sort Alphabetically</span>
    </Button>
    {cards}
  </div>
)
}
});

On button Click I want to re-render the panels, to show in alphabetical order. I know my function to order them correctly works, and logs to the console with the data in the correct order, but I cannot seem to force an update to re-render the state.

Answer 1

Instead of doing the force update, always make the change in state variable, it will automatically re-render the ui, Whenever you are sorting the array, update the state value with sorted array, And write a separate method to create the Panels, your Panels will updated automatically without forceupdate, Try this:

const Feed = React.createClass({
    getInitialState: function () {
        return {
            data: {},
        }
    },

    componentDidMount: function () {
        axios.all([
            getAllTeams(), getAllDrivers()
        ]).then((results) => {
            let teams = results[0].data;
            let drivers = results[1].data;
            let newDrivers = normaliseDrivers(drivers);
            var data = normaliseData(teams, newDrivers);
            var value = this.sortAndRenderPanels(data);
            this.setState({ data: value})
      })
    },

    sortAndRenderPanels: function (data) {
        let teamsArr = Object.values(data);
        teamsArr.sort(function(a,b) {
            return (a.positions[0][2016] > b.positions[0][2016])
            ? 1 : ((b.positions[0][2016] > a.positions[0][2016])
            ? -1 : 0);
        });
        return teamsArr || [];
    },

    sortAlphabeticallyAndRender: function (data) {
        let teamsArr = Object.values(data);
        teamsArr.sort(function(a, b){
            var textA = a.name.toUpperCase();
            var textB = b.name.toUpperCase();
            return (textA < textB) ? -1 : (textA > textB) ? 1 : 0;
        });
        return teamsArr;
    },

    handleAlphabetClick: function (e) {
        e.preventDefault();
        let data = this.sortAlphabeticallyAndRender(this.state.data);
        this.setState({data:data});
    },

    createPanel: function (){
        return this.state.data.map((data, i) => {
            return (
                <MyPanel
                    key={i}
                    data={data}
                />
            )
        })
    }

    render: function () {
        return (
            <div id="feed">
                <Button id='sort-button' onClick={this.handleAlphabetClick} type="button" className="btn btn-warning" aria-label="Left Align">
                    <span > Sort Alphabetically</span>
                </Button>
                {this.createPanel()}
            </div>
        )
    }
});

Answer 2

If i'm not wrong, the forceUpdate() method will call the render() method.

In the render, you're calling :

const cards = this.sortAndRenderPanels();

And print them with { cards }

I think you need to move cards in this.state

In your componentDidMount() callback add this :

componentDidMount: function () {
    let obj = this;
    axios.all([
        getAllTeams(), getAllDrivers()
    ]).then((results) => {
        let teams = results[0].data;
        let drivers = results[1].data;
        let newDrivers = normaliseDrivers(drivers);
        var data = normaliseData(teams, newDrivers);
        this.setState({
            data: data,
            cards: obj.sortAndRenderPanels()
        })
    })
}

And in your click handler add this :

handleAlphabetClick (e) {
    e.preventDefault();
    this.setState({
        cards: this.sortAlphabeticallyAndRender(this.state)
    });
}

The re-render should normally occur. If not add this :

componentDidUpdate: function() {
    this.forceUpdate();
}

Last you need to change in your render {cards} with { this.state.cards }

Regards