react.js get child value in parent component

Question

I have a parent Component [MainLayout] that has a child [ListItems] and that has multiple children [ListItem].

How can I get the value of the clicked child [ListItem] in the [MainLayout] component?

/* index.js */

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, Link, IndexRoute } from 'react-router'
import ListItems from './components/listitems';

class MainLayout extends Component {
    constructor(props) {
        super(props);

        this.state = {
            items: [],
            selectedItem: null
        };

        this.getTracks = this.getTracks.bind(this);

        this.listItemClicked = this.listItemClicked.bind(this);

        this.getTracks();

    }

    listItemClicked(item) {
        console.log(item);
    }

    getTracks() {

fetch('https://api.spotify.com/v1/search?q=newman&type=track&market=US')
                .then((response) => response.json())
                .then((responseJson) => {
                    this.setState({items: responseJson.tracks.items});
                    console.log(responseJson);
                    return responseJson;
                });
    }

    render() {
        return (
            <div>
                {this.props.children && React.cloneElement(this.props.children, {
                    items: this.state.items,
                    onListItemClicked: this.listItemClicked
                })}
            </div>
        );
    }
}

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {

    return (
        <div>
            <ListItems onListItemClick={this.props.onListItemClicked} items={this.props.items} />
        </div>
    );
  }

}


/* listitems.js */

import React, {Component} from 'react';
import ListItem from './listitem';

const ListItems = (props) => {

    const allitems = props.items.map((item) => {
        return (
            <ListItem onListItemClick={props.onListItemClick} item={item} key={item.id} />
        )
    });


        return (
            <ul className="list-group">
                {allitems}
            </ul>
        );


}
export default ListItems;

/* listitem.js */

import React, {Component} from 'react';

class ListItem extends Component {

    constructor (props) {
        super(props);
    }

    render() {
        return (
            <div className="">
                <h4 onClick={this.props.onListItemClick}>{this.props.item.album.artists['0'].name} - {this.props.item.name}</h4>
            </div>
        );
    }

}
export default ListItem;

Thanks for the answers!

Answer 1

The solution you want can be found here.

But I would suggest you using any separate architecture like Redux or Flux. I know you wanted an answer with less overhead, but believe me, using this is going to save you a lot of time and they handle each and every state effectively. I will talk about Redux as I have only worked on Redux.

---

How Redux solves you problem?

All the data you need are stored in Redux store which can be accessed, altered from any page. When ever you want alter any property, there is method available called dispatch() which helps you to do so. In order to access the values from store, you can use @connect() decorators.

---

To know more about dispatcher, see this link.

To know about @connect() decorator, see this link.

Difference between Redux and Flux can be found here and here.

Answer 2

in your listitem, you can call the onListItemClick and pass the item as parameter like onClick={() => { this.props.onListItemClick(this.props.item); }}

/* listitem.js */

import React, {Component} from 'react';

class ListItem extends Component {

    constructor (props) {
        super(props);
    }

    render() {
        return (
            <div className="">
                <h4 onClick={() => { this.props.onListItemClick(this.props.item); }}>{this.props.item.album.artists['0'].name} - {this.props.item.name}</h4>
            </div>
        );
    }

}
export default ListItem;