Calling a function in another function that is transferred to another component

Question

My goal is to call the function performSearch () by clicking div in the componentItem. The performSerach () function is placed in another select () function. The select () function is passed to the Item component. In console.log returns me active = null.

Items

class Items extends Component {
  constructor (props) {
    super(props);
    this.state = {
      items: [],
      active: null,
            abc: null
    }
  }

  select = (id) => {
    this.setState({
            abc: id
    })
    this.performSearch(id);
  }

  componentDidMount() {
    axios.get
        axios({
            url,
            method: "GET",
            headers: {
              'Authorization': `Bearer ${token}`
            }
        })
        .then(res => {
            this.setState({
              items: res.data 
            });
        })
        .catch(error => {
            console.log(error);
        })      
}

performSearch = (id) => {
  axios.get
    axios({
        url: `https://app.com/api/v1/${id}`,
        method: "GET",
        headers: {
          'Authorization': `Bearer ${token}`           
        }
    })
    .then(res => {
        this.setState({
            active: res.data
        });
    })
    .catch(error => {
        console.log(error);
    })
}

  render () {
    <div>
            {this.state.items.map((item, index) => 
                <Item
                        select={this.select}
                />
            )} 
    </div>
  }
}

Item

class Item extends Component {
  render () {
    return (
      <div onClick={()=> this.props.select(this.props.item.id)}>

      </div>
    )
  } 
}

Answer 1

  render () {
    <div>
            {this.state.items.map((item, index) => 
                <Item
                        select={this.select}
                />
            )} 
    </div>
  }

Should pass the item the Item component:

  render () {
    <div>
            {this.state.items.map((item, index) => 
                <Item
                        select={this.select}
                        item={item}
                        key={index}
                />
            )} 
    </div>
  }

Or:

  render () {
    <div>
            {this.state.items.map((item, index) => 
                <Item
                        select={() => this.select(item.id)}
                />
            )} 
    </div>
  }