如何将（this）道具传递给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>
    );
  }

Answer 1

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 (eg components) doesn't have any effect.