Displaying an array value instead of a new value list in a React component

Question

Displaying an array value instead of a new value list in a React component

Situation -

Initial number input in text field - 1

List of Items -

1
6
11

Upon removing 1 from the text field, the list becomes -

New List Items -

NaN
NaN
NaN

Now, if you input 4 in the field.

The updated List Items are -

NaN
NaN
4
9
14

Expected Outcome -

The List should only show - 4, 9 and 14, not NaN, NaN, 4, 9, 14.

Please advise on what might be incorrect here.

Code Section -

import React, { useState } from "react";
import List from "./List";

const ReRendering = () => {
  const [number, setNumber] = useState(1);

  const getList = () => [number, number + 5, number + 10];

  return (
    <div>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(parseInt(e.target.value, 10))}
      />
      <div>
        <List getList={getList} />
      </div>
    </div>
  );
};

export default ReRendering;

List.js File

import { useEffect, useState } from "react";

const List = ({ getList }) => {
  const [item, setItem] = useState([]);

  useEffect(() => {
    setItem(getList());
  }, [getList]);
  return (
    <div className="list">
      {item.map((x) => (
        <div key={x}>{x}</div>
      ))}
    </div>
  );
};

export default List;

Live Demo - https://codesandbox.io/s/gallant-gagarin-l18ni1?file=/src/ReRendering.js:0-463

javascript html css reactjs react-usecallback

Answer 1

Answer №1

When

setNumber(parseInt(e.target.value, 10))

is used, the number state will be set to NaN if the input field is empty because an empty string cannot be converted to an integer using parseInt.

console.log(parseInt(''));

Having NaN as a value can lead to issues as mentioned in the React warning:

Warning: Encountered two children with the same key, NaN. Keys should be unique to ensure components maintain their identity during updates. Having non-unique keys may result in duplicated or omitted children, which is not supported and might change in future versions.

Duplicate NaN values create duplicate keys.

It's recommended to use valueAsNumber and default to 0 if the value is absent.

const { useState, useEffect } = React;
const ReRendering = () => {
  const [number, setNumber] = useState(1);

  const getList = () => [number, number + 5, number + 10];

  return (
    <div>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(e.target.valueAsNumber || 0)}
      />
      <div>
        <List getList={getList} />
      </div>
    </div>
  );
};

const List = ({ getList }) => {
  const [item, setItem] = useState([]);
  useEffect(() => {
    setItem(getList());
  }, [getList]);
  return (
    <div className="list">
      {item.map((x) => (
        <div key={x}>{x}</div>
      ))}
    </div>
  );
};


ReactDOM.render(<ReRendering />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

A more effective way to organize this would be to directly call getList within the child component instead of using a separate state and effect hook inside it.

const { useState, useEffect } = React;
const ReRendering = () => {
  const [number, setNumber] = useState(1);

  const getList = () => [number, number + 5, number + 10];

  return (
    <div>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(e.target.valueAsNumber || 0)}
      />
      <div>
        <List getList={getList} />
      </div>
    </div>
  );
};

const List = ({ getList }) => (
  <div className="list">
    {getList().map((x) => (
      <div key={x}>{x}</div>
    ))}
  </div>
);


ReactDOM.render(<ReRendering />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Answer 2

When

setNumber(parseInt(e.target.value, 10))

is used, the number state will be set to NaN if the input field is empty because an empty string cannot be converted to an integer using parseInt.

console.log(parseInt(''));

Having NaN as a value can lead to issues as mentioned in the React warning:

Warning: Encountered two children with the same key, NaN. Keys should be unique to ensure components maintain their identity during updates. Having non-unique keys may result in duplicated or omitted children, which is not supported and might change in future versions.

Duplicate NaN values create duplicate keys.

It's recommended to use valueAsNumber and default to 0 if the value is absent.

const { useState, useEffect } = React;
const ReRendering = () => {
  const [number, setNumber] = useState(1);

  const getList = () => [number, number + 5, number + 10];

  return (
    <div>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(e.target.valueAsNumber || 0)}
      />
      <div>
        <List getList={getList} />
      </div>
    </div>
  );
};

const List = ({ getList }) => {
  const [item, setItem] = useState([]);
  useEffect(() => {
    setItem(getList());
  }, [getList]);
  return (
    <div className="list">
      {item.map((x) => (
        <div key={x}>{x}</div>
      ))}
    </div>
  );
};


ReactDOM.render(<ReRendering />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

A more effective way to organize this would be to directly call getList within the child component instead of using a separate state and effect hook inside it.

const { useState, useEffect } = React;
const ReRendering = () => {
  const [number, setNumber] = useState(1);

  const getList = () => [number, number + 5, number + 10];

  return (
    <div>
      <input
        type="number"
        value={number}
        onChange={(e) => setNumber(e.target.valueAsNumber || 0)}
      />
      <div>
        <List getList={getList} />
      </div>
    </div>
  );
};

const List = ({ getList }) => (
  <div className="list">
    {getList().map((x) => (
      <div key={x}>{x}</div>
    ))}
  </div>
);


ReactDOM.render(<ReRendering />, document.querySelector('.react'));

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div class='react'></div>

Answer 3

Answer №2

To achieve the desired outcome, implement the following modifications:

Essentially, the code snippet handles the scenario where the input is empty and specifies to display nothing when no input is provided.

List.js


import { useEffect, useState } from "react";

const List = ({ getList }) => {
  const [item, setItem] = useState([]);

  useEffect(() => {
    setItem(getList());
  }, [getList]);

  return (
    <div className="list">
      {item ? item.map((x) => (               // modifications
        <div key={x}>{x}</div>
      )) : ""}
    </div>
  );
};

export default List;

ReRendering.js

import React, { useState } from "react";
import List from "./List";

const ReRendering = () => {
  const [number, setNumber] = useState(1);

  const getList = () => {
    if(number === "") {                     // modifications
      return;
    }
    return [number, number + 5, number + 10];
  };

  return (
    <div>
      <input
        type="number"
        value={number}
        onChange={(e) => {
          if (e.target.value !== "") {               //modifications
            setNumber(parseInt(e.target.value, 10));
          } else {
            setNumber(""); 
          }
        }}
      />
      <div>
        <List getList={getList} />
      </div>
    </div>
  );
};

export default ReRendering;

Answer 4

To achieve the desired outcome, implement the following modifications:

Essentially, the code snippet handles the scenario where the input is empty and specifies to display nothing when no input is provided.

List.js


import { useEffect, useState } from "react";

const List = ({ getList }) => {
  const [item, setItem] = useState([]);

  useEffect(() => {
    setItem(getList());
  }, [getList]);

  return (
    <div className="list">
      {item ? item.map((x) => (               // modifications
        <div key={x}>{x}</div>
      )) : ""}
    </div>
  );
};

export default List;

ReRendering.js

import React, { useState } from "react";
import List from "./List";

const ReRendering = () => {
  const [number, setNumber] = useState(1);

  const getList = () => {
    if(number === "") {                     // modifications
      return;
    }
    return [number, number + 5, number + 10];
  };

  return (
    <div>
      <input
        type="number"
        value={number}
        onChange={(e) => {
          if (e.target.value !== "") {               //modifications
            setNumber(parseInt(e.target.value, 10));
          } else {
            setNumber(""); 
          }
        }}
      />
      <div>
        <List getList={getList} />
      </div>
    </div>
  );
};

export default ReRendering;

Answer 5

Answer №3

When an input is empty, its value is simply an empty string. This causes issues for the parseInt function since it doesn't know how to handle it, resulting in a return of NaN. To resolve this, a function can be created to handle this scenario by setting the state to 0 if the input's value is empty. Here's an example:

const handleChange = (e) => {
  const value = e.target.value;
  setNumber(value === '' ? 0 : Number(value));
}

Additionally, I wanted to mention that you can simplify your code in the <List /> component by removing the unnecessary useState and useEffect. Since the list will update when the props change, you can directly map through the array like this:

getList().map(...rest of the code)

Answer 6

When an input is empty, its value is simply an empty string. This causes issues for the parseInt function since it doesn't know how to handle it, resulting in a return of NaN. To resolve this, a function can be created to handle this scenario by setting the state to 0 if the input's value is empty. Here's an example:

const handleChange = (e) => {
  const value = e.target.value;
  setNumber(value === '' ? 0 : Number(value));
}

Additionally, I wanted to mention that you can simplify your code in the <List /> component by removing the unnecessary useState and useEffect. Since the list will update when the props change, you can directly map through the array like this:

getList().map(...rest of the code)

Answer 7

Answer №4

It appears that @CertainPerformance has already provided a solution to your query-

Please inform me if there are any errors in my approach.

After reviewing your feedback regarding the issue with zero in the input field, I suggest updating your getList() method by checking for numbers and returning an empty array if the number is blank.

The adjustment to your getList() function -

const getList = () => number ? [number, number + 5, number + 10] : [];

Answer 8

It appears that @CertainPerformance has already provided a solution to your query-

Please inform me if there are any errors in my approach.

After reviewing your feedback regarding the issue with zero in the input field, I suggest updating your getList() method by checking for numbers and returning an empty array if the number is blank.

The adjustment to your getList() function -

const getList = () => number ? [number, number + 5, number + 10] : [];

Displaying an array value instead of a new value list in a React component

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

The request to localhost resulted in a 404 error, indicating that the resource was not found

There have been no updates made to the SANITY Server while in Production Preview Mode

Alter the background of cards in real-time

Retrieve the attributes associated with a feature layer to display in a Pop-up Template using ArcGIS Javascript

What is the best way to modify the appearance of the button?

Why does Vue 3 refuse to refresh an <img> element, while it successfully refreshes all other components within the same component?

Updating the "title" attribute dynamically using jQuery in real time

Obtain the location of the image source from a text file within an HTML document

Switching Json to Typescript

Creating a Personalized Color Palette Naming System with Material UI in TypeScript

Creating numerous pre-signed URLs using an Application Programming Interface

The issue with ng-bind-html causing the disappearance of paragraph spaces

Internet Explorer does not recognize window.opener.location as valid, while there are no issues with Chrome

Finding out which carousel the user is currently engaging with in the Slick Carousel can be accomplished by following these steps

Accessing external content within our webpage

Unable to pass Ajax value to Laravel controller

Guide on Deleting Specific Item Using SQL Data Source Delete Statement

Duplicate multiple "li" elements using jQuery and place them in a designated position within the ul element, rather than at the end

Leveraging geoPosition.js in conjunction with colobox

What is the process for obtaining the dimensions (height/width) of a particular instance within a dynamically rendered list?