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 ponent.

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 ponent 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: [],
        }
    }

    ponentWillMount(){
        …
    }

    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>

        );
    }
}

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 ponent.

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 ponent 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: [],
        }
    }

    ponentWillMount(){
        …
    }

    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>

        );
    }
}

• javascript
• reactjs

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

1 Answer 1

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

1. Click event handler sets a state property like activeTitle to the id that was clicked.
2. 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} />