如何修复 onClick 元素。 ReactJS

Question

I new in ReactJS and i have one few question. I defined function showModal and but console.log() and this.setState({show:!this.state.show}); .

And after that I applied this function onClick event for div element inside map function.

1st question: When I click on div element showModal work but in console I don't see my console.log .

2nd question: I want to make when you click on one div element it must add/show few new div elements but only for one div element (on which I clicked). But now when I click on one div element it add/show new elements for all div elements which had this showModal function.

How can i fix this

import React, { Component } from "react";
import Modal from '../components/modal/form'

const DEFAULT_QUERY = 'redux';
const PATH_BASE = 'URL which work correct';


class Actions extends React.PureComponent{

    constructor(){
        super();
        this.state = {
            result:null,
            show:false,
            helpId:null
        };
        this.setSearchTopStories = this.setSearchTopStories.bind(this);
        this.showModal = this.showModal.bind(this);
        this.handleClickFromParent = this.handleClickFromParent.bind(this);
        this.onClose = this.onClose.bind(this);
    }
    onClose = e => {
        this.setState({ show: false});
    }

    handleClickFromParent = e => {
        this.setState({show: !this.state.show});
    }

    showModal = e => {
            console.log('BABE');
            this.setState({show: !this.state.show})
    };

    setSearchTopStories(result) {
        this.setState({ result });
    };
    componentDidMount() {        
        fetch(`${PATH_BASE}`)
            .then(response => response.json())
            .then(result => this.setSearchTopStories(result))

        .catch(error => error); 
    };

    render(){
        const { searchTerm, result } = this.state;
        console.log('* Actions Pure*');
        console.log(result);
        console.log('=');

        return(
        <div>
            {   
            (result !== null) ?
                result.map(
                (item,index) =>
                    <div>
                    <div onClick={()=>this.showModal()}>{item.name}</div>
                    <Modal 
                        id = {index}
                        handleClickFromParent {this.handleClickFromParent}
                        item = {[item]}
                        show = {this.state.show}
                        onClose = {this.onClose}>
                        YOLO
                    </Modal>
                    </div>
                )  
                : null 
            }

        </div>
        )
    }
}

export default Actions;

Answer 1

While selecting u can pass the item on method, and on click u can set the item value. Please check the below code.

Demo: https://codesandbox.io/s/stackoverflowmodal-19i36

this.state = {
          result: null,
          show: false,
          selectedItem:null,
          helpId: null
        };

//

showModal = (selectedItem) => {
        this.setState({
          show: !this.state.show,
          selectedItem
        });
      };

//

    class Actions extends React.PureComponent {
  constructor() {
    super();
    this.state = {
      result: null,
      show: false,
      selectedItem: null,
      helpId: null
    };
    this.setSearchTopStories = this.setSearchTopStories.bind(this);
    this.showModal = this.showModal.bind(this);
    this.handleClickFromParent = this.handleClickFromParent.bind(this);
    this.onClose = this.onClose.bind(this);
  }
  onClose = e => {
    this.setState({
      show: false
    });
  };

  handleClickFromParent = e => {
    this.setState({
      show: !this.state.show
    });
  };

  showModal = selectedItem => {
    this.setState({
      show: !this.state.show,
      selectedItem
    });
  };
  setSearchTopStories(result) {
    this.setState({ result });
  }
  componentDidMount() {
    fetch(`${PATH_BASE}`)
      .then(response => response.json())
      .then(result => this.setSearchTopStories(result))
      .catch(error => error);
  }
  render() {
    const { searchTerm, result, selectedItem } = this.state;
    return (
      <div>
        {result && result.length
          ? result.map((item, index) => (
              <div>
                <div onClick={() => this.showModal(item)}>{item.name}</div>
              </div>
            ))
          : null}
        {selectedItem && (
          <Modal
            id={index}
            handleClickFromParent={this.handleClickFromParent}
            item={[selectedItem]}
            show={this.state.show}
            onClose={this.onClose}
          >
            YOLO
          </Modal>
        )}
      </div>
    );
  }
}

export default Actions;