React - Passing props to child onClick

Question

I have an index of images and titles I am pulling in from Dropbox. I aim to be able to click on a title and load a specific project, but right now I'm simply trying to get to grips with passing the data of a clicked title to the a component.

I've looked at the React tutorial, the documentation & other similar questions on here (& am concerned this will be treated as a duplicate question), but I can't seem to figure out a way of passing the specific title that is clicked. I'm currently getting the error: Cannot read property 'title' of undefined.

I've managed to pull out the specific title via console.log & filled the ProjectTitle component with all of the titles but am stumped at this seemingly simple hurdle.

Thanks

class ProjectTitle extends React.Component{
    render() {
        return <h1>{this.props.title}</h1>;
    }
}

class Index extends React.Component {
    constructor(){
        super();
        this.state = {
            imageSource: [],
            imageTitles: [],
        }
    }

    componentWillMount(){
        …
    }

    render(){
        if(!this.state.imageSource.length)
            return null;
        let titles = this.state.imageTitles.map((el, i) => <p>{el}</p>)
        let images = this.state.imageSource.map((el, i) =>

        <div className="imageContainer">
            <img key={i} className='images' src={el}/>
            <div className="imageTitle" onClick={() => 
                ProjectTitle.props.title(titles[i].props.children)}>{titles[i]}
            </div>
        </div>
        )

        return (
            <div className="wrapper">
                {images}
                <ProjectTitle />
            </div>

        );
    }
}

Try to add new `title` to `state` and then update that title `onclick`. The pass the `state.title` as props for `ProjectTitle` — Tareq, Aug 23 '17 at 13:01
You sure that `imageSources` has the same length as `imageTitles`? — Murat Karagöz, Aug 23 '17 at 13:04
Tareq's comment makes sense, and you might want to do some ternary checking if the activeTitle is set, then render the component, else render undefined — Laurens Mäkel, Aug 23 '17 at 13:06

TW80000 · Accepted Answer · 2017-08-23T13:14:33.720

Generally in a situation like this, you want to follow this structure:

Click event handler sets a state property like activeTitle to the id that was clicked.
The element whose prop needs to be set (ProjectTitle) gets it from it's parent state (Index).

The changes to your code might look something like:

// in Index constructor 
this.state = {
    // stuff you already have...
    activeTitle: null
}
this.handleItemClick = this.handleItemClick.bind(this);

// in Index
handleItemClick(title) {
    this.setState({activeTitle: title});
}

// in Index.render() in the loop
// you might have you add some code to get titles[i]
<div className="imageTitle" onClick={() => this.handleItemClick(titles[i])}></div>

// in Index.render() return statement
<ProjectTitle title={this.state.activeTitle} />

React - Passing props to child onClick

1 Answers1

Linked