Q:

onClick renders only once (React)

I am trying to imitate behaviour of a checkbox , where the user clicks on a Row (from 'react-flexbox-grid') and image of a checkbox gets replaced with checked or not checked.
The logic portion is with the following code:
class Account extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      condition: true
    }
   
    this.handleSelect = this.handleSelect.bind(this);
  }

  handleSelect=(obj)=> {
      this.setState({
        condition: obj.condition
  }
  render() {
    const {
      condition,
    } = this.state;
   
    return (
          <AccountView
            condition={condition}
            handleSelect={this.handleSelect}
          />
    );
  }
}

The view portion is as follows:
import { Row, Col } from 'react-flexbox-grid';

export const AccountView = (
  {
    condition,
    onSelect,
    
  }
) => {

  const renderCheckbox = (trueCond) => {
    return trueCond ? <CheckedImg
      src={boxCheckedIcon}
      alt="checked check box"
    /> : <UncheckedImg
        src={boxUncheckedIcon}
        alt="unchecked check box"
      />
  };

 return (
                <Row
                  
                  onClick={() => handleSelect({ condition: !condition})}
                >
                  <Col>
                    {renderCheckbox(condition)}
                  </Col>
                  <Col >
                    This is a checkbox
                  </Col>
                </Row>

I am considering it an issue of render, but I tried using componentDidUpdate to re-render the component and it still doesn't work. The first time I click on the row, the condition updates and gets passed to AccountView, but the second/third fourth, it doesn't.

A:

You don't need to pass trueCond to renderCheckbox. You are passing it before the state has been updated.
Replace retrun trueCond with return condition.
You also need to use a callback in the state setter. In this code:
handleSelect=()=> {
      this.setState({
        condition: obj.condition

Change it to:
handleSelect=()=> {
      this.setState(prevState => ({
        condition: !prevState.condition
  }))
}

Then also:
onClick={() => handleSelect()}

