How to create a List/Detail View in React

I need to implement a kind of Master/Detail View for a Web Application in React. Since the app should be integrated into a CakePHP app I can't use React Router for handling the routes (since CakePHP would process them).

I have a List of Items and want to navigate through them, showing a Detail View. Items are nested, so there're SubItems to navigate to.

Navigation Mockup

For now I got a ItemList Component, showing a list of Cards with a clickhandler. How can I change the View without changing the url?

ItemList Component looks like:

class ItemList extends React.Component {
  constructor(props) {
      super(props);

      this.state = {
          itemList: []
      }
  }

  componentDidMount() {
    fetchItems(...)
  }
    
  render() {
    return(
      <div>
        {this.state.itemList.map(item => (
          <Item key={item.id} item={item} />
        ))}
      </div>
    );
  }
}

Item Component looks like:

class Item extends React.Component {
constructor(props) {
  super(props);

  this.state = {
    item: props.item,
  }
}

handleClick = () => {
  // How to navigate to another Component?
}

render() {
  return(
    <div>
      <div className="card my-2" onClick={this.handleClick}>
        <div className="card-body">
          <h5 className="card-title">{this.state.item.title}</h5>
          <p className="card-text">{this.state.item.description}</p>
        </div>
      </div>
    </div>
  );
 }
}

Thanks in advance!



Read more here: https://stackoverflow.com/questions/65725063/how-to-create-a-list-detail-view-in-react

Content Attribution

This content was originally published by polyte at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: