How to handle checked in input type='checkbox' in React?

You haven't shared with us how you are generating these inputs, but the primary issue has to do with using a single source of truth for all your inputs. You want to give each input, particularly the object that corresponds to that input, their own checked-state.

Considering the following example with working codesandbox: https://codesandbox.io/s/relaxed-feynman-1thb8

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const arr = [
  { val: "Cat", checked: false },
  { val: "Dog", checked: true },
  { val: "Turtle", checked: false }
];

class App extends React.Component {
  state = {
    arr: arr
  };

  handleCheck = e => {
    const arrCopy = [...this.state.arr];
    const itemToUpdate = arrCopy.find(item => item.val === e.target.value);

    itemToUpdate.checked = !itemToUpdate.checked;

    this.setState({
      arr: arrCopy
    });
  };

  createInputs = () => {
    const { arr } = this.state;

    return arr.map(elem => {
      return (
        <div>
          <input
            type="checkbox"
            style={{ margin: "0" }}
            checked={elem.checked}
            value={elem.val}
            onChange={this.handleCheck}
          />
          {elem.val}
        </div>
      );
    });
  };

  render() {
    return <div>{this.createInputs()}</div>;
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

In the above code, we organize your state-data as in array of objects, making it easier for you to render the mark-up AND keep track of the checked state of each input. Then in the handleCheck function, we identify the checked item, find its corresponding object in the array and toggle the checked state of that item.

Set input's name property to property equivalent to that of state's key. Also your way of accessing object's key as this.state[elem] is inappropriate as elem is not a variable(that should contain string as state's key).

I have prepared codesandbox for use case. Here is codesandbox link for the example : https://codesandbox.io/embed/clever-colden-2ydb6

Updated code:

checked = e => {
  const checked = e.target.checked;
  const name = e.target.name;
  this.setState({
    [name]: checked
  });
};

render() {
  return (
    <div>
      <input
        type="checkbox"
        style={{ margin: "0" }}
        // set name prop to equivalent to state's property
        name="elem"
        // either use - this.state['elem'] or this.state.elem
        checked={this.state.elem}
        // value = {elem} no need of this
        onChange={this.checked}
      />
      Is checked : {this.state.elem ? "yes" : "no"}
    </div>
  );
}