simple parent/children management

App.jsx

class Parent extends React.Component {
    state = {
       currentCell: null,
       cells: []
    };

    onOpenCell = (cell) => {
       this.setState({
          currentCell: cell,
       });
    }
    
    onCloseCell = () => {
      this.setState({
          currentCell: null,
      });
    }
    
    render() {
      const {currentCell, cells} = this.state;
      const {onCloseCell, onOpenCell} = this;
      if( currentCell ) {
        return <CellDetails 
                 cell={currentCell} 
                 onCloseCell={onCloseCell}
                 />;
      } else {
        return <CellList
                 cells={cells}
                 onOpenCell={onOpenCell}
                 />;
      }
    }
  
}

const CellDetails = ({currentCell, onCloseCell}) => (
    <div>
        <button onClick={onCloseCell}>Go back</button>
        <h1>{currentCell.title}</h1>
        <p> ... </p>
    </div>  
);
        
const CellList = ({cells = [], onOpenCell}) => (
    <ul>
        {cells.map( cell => (
            <li>
                <a onClick={() => onOpenCell(cell)}>View details</a>
            </li>
        )}
    </ul>        
);