How to pass (this) props to sibling components in React

Question

I'm mapping a list of data in which each listing has a button which opens a modal to display a full listing's data. Except instead of mapping each entry with a button containing its own modal component mapped per each listing, I'd like to have each button trigger an outside modal component.

handleTaskModal = () =>{

    <TaskModal {...state} />
  }


  render() {
    const { tasks } = this.state;

    return (
      <div>
        <Container color="light">

          <Row className="flex-row">
            {tasks.map(({ name, image, description }) => (
                <Col key={name}
                  xs="11"
                  sm="6"
                  lg="4"
                  className="mx-auto my-sm-2 my-lg-1"
                  >
                    <Card className="task-card border-0 rounded shadow-sm my-3">
                      <CardImg
                        top
                        width="100%"
                        src={image}
                        style={{
                          width: "100%",
                          height: "45vh",
                          objectFit: "cover"
                        }}/>

                      <CardBody>
                        <CardTitle className="card-title p-0 text-left">{name}</CardTitle>

                      </CardBody>
                        <Button
                          color="primary"
                          className="w-50 rounded mb-3 mx-auto shadow-sm"
                          style={{
                            borderRadius:"20px"
                          }}
                          onClick={this.handleTaskModal}
                          > View Task
                        </Button>
                    </Card>
                </Col>
            ))}
          </Row>

        </Container>

      </div>
    );
  }

Possible duplicate of [React: "this" is undefined inside a component function](https://stackoverflow.com/questions/33973648/react-this-is-undefined-inside-a-component-function) — Mario, Jul 10 '19 at 14:23

trixn · Answer 1 · 2019-07-10T14:49:10.040

I want to share props between each entry to one modal component

You don't do this in react. Data always flows from parents to children, never between siblings. Actions can flow up from a child to the parent by providing a handler. The correct way to solve this is to store the currently viewed task in the parent state and display the modal accordingly:

class Tasks extends Component {
  state = {
      viewed: null,
  };

  handleShow = name => this.setState({viewed: name});
  handleClose = () => this.setState({viewed: null});    

  render() {
      const {tasks, viewed} = this.state;

      return (
        <div>
          <Container>
            <Row>
              {/* details omitted for simplicity */}
              {tasks.map(({name, image, description}) => (
                <Col key={name}>
                  <Button onClick={() => this.handleShow(name)}>View Task</Button>
                </Col>
              ))}
            </Row>
          </Container>
          {viewed && (
            <TaskModal 
              task={tasks.find(task => task.name === viewed)}
              onClose={this.handleClose}
            />
          )}
        </div>
      );
  }
}

Also note that handlers should modify the state to trigger a re-render. Returning something from them (e.g. components) doesn't have any effect.

This has gotten me the furthest except I should have mentioned I'm using Reactstrap to power my modals, so I'd have to return a boolean value in order to close the modal. — user8559542, Jul 12 '19 at 16:36
Another question I have is how would the find method work with a larger amount of data? I would assume it wouldn't be efficient on a large group of data, IF that was the case, no? Thank you regardless! — user8559542, Jul 12 '19 at 16:37

How to pass (this) props to sibling components in React

1 Answers1