Conditional render is not updating with setState()

Question

I have a form that I would like to update depending on the state of a toggle in that form. Here is my container component with the form:

import React, { Component } from 'react';
import {
  Create,
  Edit,
  NumberInput,
  SimpleForm,
  TextInput
} from 'admin-on-rest';
import LatLngInput from '../customInputs/LatLngInput';
import UTMInput from '../customInputs/UTMInput';
import UTMSwitch from '../customInputs/UTMSwitch';

export class LocationEdit extends Component {
  constructor(props) {
    super(props);
    this.state = {
      utmInput: false,
      utm: {
        easting: 0,
        northing: 0,
        isSouthern: false,
        zone: 0
      }
    };
  }

  toggleUTM() {
    this.setState(prevState => ({ utmInput: !prevState.utmInput }), () => {
    console.log(this.state.utmInput);
   });
  }

  render() {
    return (
      <Edit title={<LocationTitle />} {...this.props}>
        <SimpleForm validate={validateLocationCreation}>
          <TextInput source="name" />
          {this.state.utmInput ? (
            <UTMInput />
          ) : (
            <LatLngInput />
          )}
          <UTMSwitch defaultToggled={this.state.utmInput} onToggle={this.toggleUTM.bind(this)}/>
        </SimpleForm>
      </Edit>
    );
  }
}

The toggle is supposed to switch between two input fields: UTMInput and LatLngInput. These are currently pretty similar with the exception of their labels:

UTMInput:

import React from 'react';
import { Field } from 'redux-form';
import { NumberInput } from 'admin-on-rest';
const UTMInput = () => (
  <span>
    <Field name="latitude" component={NumberInput} label="Northing" />
    <br />
    <Field name="longitude" component={NumberInput} label="Easting" />
  </span>
);

export default UTMInput;

LatLngInput:

import React from 'react';
import { Field } from 'redux-form';
import { NumberInput } from 'admin-on-rest';
const LatLngInput = () => (
  <span>
    <Field name="latitude" component={NumberInput} label="Latitude" />
    <br />
    <Field name="longitude" component={NumberInput} label="Longitude" />
  </span>
);

export default LatLngInput;

I understand that setState by itself does not guarantee a UI update, which is why I've included the console.log(this.state.utmInput) as a callback to the setState function in toggleUTM (this logs alternating true and false to the console as expected). I've also tried the other form of setState which accepts a function instead of an object, as the React docs suggest. I've even tried using this.forceUpdate() after the console.log(this.state.utmInput). None of these have worked.

I've used breakpoints in VSCode and I can confirm that the setState function is being called each time I toggle the switch but the conditional ({this.state.utmInput ?...) is not being called. I'm using the admin-on-rest framework, although I don't know if this is the issue. I've checked the source code and shouldComponentUpdate is not being used in any of the components I've imported from that framework (<Edit />, <SimpleForm />, <TextInput /> or <NumberInput />).

Any help would be very much appreciated!

Answer 1

I tried putting together an example repo that reproduces the error, but it worked fine in this new example. Turns out, despite my best guess, the Admin On Rest framework was the problem.

Upgrading to version 1.4.0 from 1.3.2 solved my issue.