Rendering React Components based on array object id

Question

I have some data called channels which is an array containing objects:

channels : [
  { name:'tv100',number:'100'},
  { name:'tv200',number:'200'}
]

My components in react:

ChannelContainer:

export default class ChannelContainer extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            channels: '',
            selectedChannel: ''
        }
    }

    componentDidMount() {
        let channel_data = [{ name: 'tv100', number: '100' }, { name: 'tv200', number: '200' }];
        this.setState = { channels: channel_data }
    }

    render(){
        return (
            <div className="tv">
                <TvGuide channel={this.state.channels} />
                <TvView channel_nr={this.state.selectedChannel} />
            </div>
        );
    }
}

TvGuide component:

const TvGuide = (props) => {
    return (
        <div className="tvguide_container">
            <ul>
                {props.channel.map((number, index) => {
                    return(
                        <li key={index}>
                            <a> {number}</a>
                        </li>
                    )   
                })
                }
            </ul>
        </div>
    );  
}

TvView component:

const TvView = (props) => {
    return (
        <div>
            <h1>{props.channel.name}</h1>
        </div>
    )
}
export default TvView

When a user click on one of the links in TvGuide component I would like to send props data to TvView component so it can render the name of the channel. What is the best way to go forward with this in react?

enjoylife · Accepted Answer · 2017-07-25 16:15:54Z

1

From ChannelContainer I would pass in a onClick handler to TvGuide which would be called with the channel clicked on, and this would call setState in the container, thereby rerendering your TvView.

class ChannelContainer extends React.Component {

    // ...

    onGuideClick = (channel) => {
        this.setState({
            selectedChannel: channel
        })
    }

    render(){
        return (
            <div className="tv">
                <TvGuide onClick={this.onGuideClick} channel={this.state.channels} />
                <TvView channel_nr={this.state.selectedChannel} />
            </div>
        );
    }
}


const TvGuide = (props) => {

    return (
        <div className="tvguide_container">
            <ul>
                {props.channel.map((channel) => {
                    const onClick = () => {
                        props.onCLick(channel);
                    }
                    return(
                        <li onClick={onClick} key={channel.number}>
                            <a>{channel.name}</a>
                        </li>
                    )
                })
                }
            </ul>
        </div>
    );
}

edited Jul 25, 2017 at 16:15

answered Jul 25, 2017 at 16:09

enjoylife

3,8612 gold badges27 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user592638 Over a year ago

can you provide an code example? Just wanna get my head around it.

enjoylife Over a year ago

sure, I added some, untested code which follows the description

Ruan Mendes Over a year ago

A better abstraction is to have a onChannelSelected event, that way the event can be fired if you offer keyboard navigation, or if it's programatically changed. Also, why are you creating a separate handler for each channel? Can't you just do onClick="this.onClick(channel)"

user592638 Over a year ago

@enjoylife nice, can I set a default value so it start with index 0 in the array object. Something like channel = channel || this.state.selectedChannel ...

Collectives™ on Stack Overflow

Rendering React Components based on array object id

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related