单击React js循环中的第一个元素

Question

What I want to do if user clicks on element then add a class on element and also, I have below repeat code, where I want to trigger click on first element of loop when components get loaded or either add class.

Whichever is feasible.

Object.keys(this.state.cdata).map((id,val) => {
    return (
        <div key={val}  onClick={this.select.bind(this, this.state.cdata[id].id)} >
            <div><i className="fa fa-globe" aria-hidden="true"></i> 
                <div className="country-name">{this.state.cdata[id].name}</div>
                <input type="text" value={this.state.cdata[id].name} className="hidden"  onChange={this.edit}   onKeyPress={this.check}/>
            </div>
        </div>
    )
})

Answer 1

I think you can use componentDidMount for this like:

componentDidMount() {
    this.setState({ loaded: 'newClass' });
}

and in your code just add the class by checking the index

Object.keys(this.state.cdata).map((id,val) => {
    return (
        <div key={val} className={val === 0 && this.state.loaded} onClick={this.select.bind(this, this.state.cdata[id].id)} >
            <div><i className="fa fa-globe" aria-hidden="true"></i> 
                <div className="country-name">{this.state.cdata[id].name}</div>
                <input type="text" value={this.state.cdata[id].name} className="hidden"  onChange={this.edit}   onKeyPress={this.check}/>
            </div>
        </div>
    )
})