Open a by clicking on an element rendered in another component

Question

I am using a group of Semantic UI <Item> components to list a bunch of products. I want to be able to edit the the details of a product when the <Item> is clicked, and I thought the best way to achieve this would be using a <Modal> component.

I want to have everything split into reusable components where possible.

(Note: I've purposefully left out some of the import statements to keep things easy to read.)

App.js

import { ProductList } from 'components';

const App = () => (
  <Segment>
    <Item.Group divided>
      <ProductList/>
    </Item.Group>
  </Segment>
)

export default App;

components/ProductList.js

import { ProductListItem } from '../ProductListItem';

export default class ProductList extends Component {
  constructor() {
    super()
    this.state = { contents: [] }
  }

  componentDidMount() {
    var myRequest = new Request('http://localhost:3000/contents.json');
    let contents = [];

    fetch(myRequest)
    .then(response => response.json())
    .then(data => {
      this.setState({ contents: data.contents });
    });

    this.setState({ contents: contents });
  }

  render() {
    return (
      this.state.contents.map(content => {
        return (
          <ProductListItem
            prod_id={content.prod_id}
            prod_description={content.prod_description}
            category_description={content.category_description}
          />
        );
      })
    )
  }
}

components/ProductListItem.js

export default class ProductListItem extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Item key={`product-${this.props.prod_id}`} as='a'>
        <Item.Content>
          <Item.Header>{this.props.prod_description}</Item.Header>
          <Item.Description>
            <p>{this.props.prod_description}</p>
          </Item.Description>
        </Item.Content>
      </Item>
    )
  }
}

All of this works nicely and the list of products displays as it should.

I've also created a basic modal component using one of the examples in the Modal docs:

components/ModalExampleControlled.js

export default class ModalExampleControlled extends Component {
  state = { modalOpen: false }

  handleOpen = () => this.setState({ modalOpen: true })
  handleClose = () => this.setState({ modalOpen: false })

  render() {
    return (
      <Modal
        trigger={<Button onClick={this.handleOpen}>Show Modal</Button>}
        open={this.state.modalOpen}
        onClose={this.handleClose}
        size='small'
      >
        <Header icon='browser' content='Cookies policy' />
        <Modal.Content>
          <h3>This website uses cookies etc ...</h3>
        </Modal.Content>
        <Modal.Actions>
          <Button color='green' onClick={this.handleClose}>Got it</Button>
        </Modal.Actions>
      </Modal>
    )
  }
}

So this will create a button that reads Got it wherever <ModalExampleControlled /> is rendered, and the button causes the modal to appear - great.

How do I instead get the modal to appear when one of the <Item> elements in the product list is clicked (thus getting rid of the button)?

Thanks so much for your time.

Chris

Answer 1

Your problem is that currently the modal manages its own state internally. As long as this is the case and no other component has access to that state, you can not trigger the modal component from outside.

There are various ways to solve this. The best way depends on how your app is set up. It sounds like the best way to go is to replace the internal modal state with a prop that is passed to the modal from a higher order component that also passes open/close functions to the relevant children:

// Modal.js
export default class ModalExampleControlled extends Component {
  render() {
    return (
      { this.props.open ?
      <Modal
        open={this.props.open}
        onClose={this.props.handleClose}
        size='small'
      >
        <Header icon='browser' content='Cookies policy' />
        <Modal.Content>
          <h3>This website uses cookies etc ...</h3>
        </Modal.Content>
        <Modal.Actions>
          <Button color='green' onClick={this.props.handleClose}>Got it</Button>
        </Modal.Actions>
      </Modal>
      : null }
    )
  }
}

// App.js
import { ProductList } from 'components';

class App extends Component  {
    handleOpen = () => this.setState({ open: true })
    handleClose = () => this.setState({ open: false })
    render(){
        return(
           <Segment>
             <Item.Group divided>
               <ProductList/>
             </Item.Group>
             <Modal open={this.state.open} closeModal={() => this.handleClose()}}
          </Segment>
        )
    }
}

export default App;

Keep in mind that this code is rather exemplary and not finished. The basic idea is: You need to give control to the highest parent component that is above all other components that need access to it. This way you can pass the open/close functions to the children where needed and control the modal state.

This can get unwieldy if there is a lot of this passing. If your app gets very complex it will become a matter of state management. When there is a lot going on a pattern like Redux might help to manage changing states (e.g. modals) from everywhere. In your case this might be finde, though.