CODEWITHSUNDEEP
javascriptreactjsreact-native
Vaclav Vlcek
Vaclav Vlcek

Reputation: 366

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

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

Upvotes: 1

Views: 882

Answers (2)

lissettdm
lissettdm

Reputation: 13080

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>

Upvotes: 1

Arbnor
Arbnor

Reputation: 2352

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>
    );
  }

Upvotes: 1

Related Questions