Cannot display a number of input fields given a value

Question

I'm trying to display fields based on the value of a props so let's say my props value = 2 then I want to display 2 inputs but I can't manage to get it work. This is what I tried

 const [numberOfFields, setNumberOfFields] = useState(0);
 const [loadFields, setloadFields] = useState([]);

 const addField = () => {
        return loadFields.map((tier) => {
            <div>
                <p style={{color:'black'}}>Tier {tier + 1}</p>
                <InputNumber />
            </div>
        })
    }
    const onPropsValueLoaded = (value) => {
        let tmp = value
        setNumberOfFields(tmp);
        if (numberOfFields > 0) {
            const generateArrays = Array.from(value).keys()
            setloadFields(generateArrays);
        } else {
            setloadFields([]);
        }
    }

    useEffect(() => {
        onPropsValueLoaded(props.numberOfTiers);
    }, [])

    return (
        <>
            <Button type="primary" onClick={showModal}>
                Buy tickets
            </Button>
            <Modal
                title="Buy ticket"
                visible={visible}
                onOk={handleOk}
                confirmLoading={confirmLoading}
                onCancel={handleCancel}
            >
                <p style={{ color: 'black' }}>{props.numberOfTiers}</p>
                {loadFields.length ? (
                    <div>{addField()}</div>
                ) : null}
                <p style={{ color: 'black' }}>Total price: </p>
            </Modal>
        </>
    );

so here props.NumberOfTiers = 2 so I want 2 input fields to be displayed but right now none are displayed even though loadFields.length is not null I am displaying this inside a modal (even though I don't think it changes anything).

I am doing this when I load the page that's why I am using the useEffect(), because if I use a field and update this onChange it works nicely.

EDIT: I changed the onPropsValueLoaded() function

const generateArrays = Array.from({length : tmp}, (v,k) => k)

instead of

const generateArrays = Array.from(value).keys()

Answer 1

There are couple of things you should fix in here,

First, you need to return div in addField function to render the inputs.

Second, you should move your function onPropsValueLoaded inside useEffect or use useCallback to prevent effect change on each render.

Third, your method of creating array using Array.from is not correct syntax which should be Array.from(Array(number).keys()).

So the working code should be , I also made a sample here

import React, { useState, useEffect } from "react";
import "./styles.css";

export default function App() {
  const [numberOfFields, setNumberOfFields] = useState(0);
  const [loadFields, setloadFields] = useState([]);

  const addField = () => {
    return loadFields.map((tier) => {
      return (
        <div key={tier}>
          <p style={{ color: "black" }}>Tier {tier + 1}</p>
          <input type="text" />
        </div>
      );
    });
  };

  useEffect(() => {
    let tmp = 2; // tier number
    setNumberOfFields(tmp);
    if (numberOfFields > 0) {

      const generateArrays = Array.from(Array(tmp).keys());
      setloadFields(generateArrays);
    } else {
      setloadFields([]);
    }
  }, [numberOfFields]);



  return (
    <>
      <button type="button">Buy tickets</button>

      <p style={{ color: "black" }}>2</p>
      {loadFields.length ? <div>{addField()}</div> : null}
      <p style={{ color: "black" }}>Total price: </p>
    </>
  );
}