Assign variable by rendering as Number and not as text - Reactjs

Question

I have a following code. This is the rest of the react class component that shall be rendered.

 render() {
        return (
          <div>
            {this.state.todos.map((todo) => (
              <h1 id={todo.id} onClick={this.deleteTodo}> {todo.name} </h1>
            ))}
          </div>
        );
      }

I would like to have assigned id={todo.id} as number and not as text. Don't you know please, how to fix it?

Right now, it is actually like this: id="1", but I would need that as id=1.

Thank you for your help

Arbnor · Accepted Answer · 2021-03-21 21:33:05Z

1

It's very simple. Provided that the ID always comes as a number, then you can use the parseInt() function directly. It parses a string and returns an integer. So now it looks like this:

render() {
    return (
      <div>
        {this.state.todos.map((todo) => (
          <h1 id={parseInt(todo.id)} onClick={this.deleteTodo}>
            {todo.name} 
          </h1>
        ))}
      </div>
    );
  }

answered Mar 21, 2021 at 21:33

Arbnor

2,3921 gold badge22 silver badges28 bronze badges

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

1 Comment

Arbnor Over a year ago

I'm glad to hear that. If it answers your question, don't forget to mark it as an answer. Thanks :)

lissettdm · Accepted Answer · 2021-03-21 22:18:53Z

1

Use Number, the constructor contains constants and methods for working with numbers. Values of other types can be converted to numbers using the Number() function.

  <h1 id={Number(todo.id)} onClick={this.deleteTodo}> {todo.name} </h1>

Other option:

  <h1 id={+todo.id} onClick={this.deleteTodo}> {todo.name} </h1>

edited Mar 21, 2021 at 22:18

answered Mar 21, 2021 at 22:12

lissettdm

13.2k1 gold badge25 silver badges43 bronze badges

1 Comment

Vaclav Vlcek Over a year ago

Thank you, both approaches are working perfect for me.

Collectives™ on Stack Overflow

Assign variable by rendering as Number and not as text - Reactjs

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related