Add a className to third item in array using React Js

Question

I have single button and a list of items. When I click the button I am trying to add a class to just the third object in the list. Can I set a class to a specific ID or a child?

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      items: [],
      bgColor: ''
    }
  }

  jumpTo(e) {

    // item = this.state.items[2];
    //this.setState({ bgColor: 'blue' });
  }

  componentDidMount() {
    axios.get('https://api.spacexdata.com/v2/launches')
      .then((response) => {
        //console.log(response.data)
        this.setState({
          items: response.data
        })
      })
      .catch((err) => {
        console.log('Error:', err);
      })
  }

  render() {
    const List = this.state.items.map((b, i) =>
      <li key={i} id={'fn' + i}> Flight Number: {b.flight_number} and Mission_name: {b.mission_name}</li>
    );
    return (
      <div>
        <button onClick={this.jumpTo.bind(this)}></button>
        <ul>
          {List}
        </ul>
      </div>
    );
  }
}

render(<App />, document.getElementById("root"));

Nishant Dixit · Accepted Answer · 2018-05-21 18:09:07Z

2

id={'fn' + i} you can use this if you want to do in simple way

jumpTo(e) 
{
    document.getElementById("fn2").classList.add("classname");
}

or you can do in this way also

 jumpTo(e) {
     const rawItem = this.state.items;
     rawItem[2].classes = "classname";
     this.setState({ items: rawItem });
  }

render() {
    const List = this.state.items.map((b, i) =>
      <li key={i} id={'fn' + i} className={b.classes?b.classes:""}> Flight Number: {b.flight_number} and Mission_name: {b.mission_name}</li>
    );

edited May 21, 2018 at 18:09

answered May 21, 2018 at 18:02

Nishant Dixit

5,5125 gold badges22 silver badges32 bronze badges

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

Collectives™ on Stack Overflow

Add a className to third item in array using React Js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related