React - Construct a numeric array for a component to a dynamic number

Question

I need to provide a sub component with an array of numbers from state - the array is defined by a provided total number (this.props.totalMarkerNumbers) prop (in string format) - i'm going astray with the syntax construct and wonder if anyone can please point me in the correct direction please?

Heres my code to create the array:

const ArrayCont = () => {
  let i = 0;
  let totalM = parseInt(this.props.totalMarkerNumbers, 10);
  for (i = 0; i < totalM.length; i++) {
    let no="''" + i +"''";
    return(
      {
        label:no,
        value:no
      }
    )
  }
}
const Markers = () => {

  let arrayCont = 
  return (
    [{this.ArrayCont}]
  )
}

This would be stored in state as:

class A_Log extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      
      markerArray:Markers,
    };
  }

basically if this.props.totalMarkerNumbersprovided '4' i'd want the array to be:

this.state.markerArray = [
  {
    label: '1',
    value: '1',
  },
  {
    label: '2',
    value: '2',
  },
  {
    label: '3',
    value: '3',
  },
  {
    label: '4',
    value: '4',
  },
];

theres probably a lot easier way to achieve this - any advice very welcome! Cheers.

Yosef Tukachinsky · Accepted Answer · 2021-03-18 18:16:49Z

1

I see 2 main issue in your code:

The first is this line:

let no="''" + i +"''";

I suppose you're trying to convert your int into a string, but it's not the correct way, you should instead use the toString function

The second is the return of your ArrayCont function. With the provided code, you'll return an object containing one label and one value. If you want to return an array, you have to create one and fill it each time you go through your loop

Here is a basic example:

function ArrayCont() {
  let arraySize = parseInt(this.props.totalMarkerNumbers, 10);
  const result = [];
  for (var i = 1; i <= arraySize; i++) {
    result.push({
      label: i.toString(),
      value: i.toString(),
    });
  }
  return result;
}

edited Mar 18, 2021 at 18:16

Yosef Tukachinsky

5,9051 gold badge15 silver badges32 bronze badges

answered Mar 18, 2021 at 18:07

sanjar

1,1012 gold badges9 silver badges18 bronze badges

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

Comments

Harley Lang · Accepted Answer · 2021-03-18 19:02:43Z

Are you open to using a functional react component? Something like this does the trick:


import React, { useState } from 'react';

export default function App() {

  const [ inputVal, setInputVal ] = useState('0');

  const [ myArray, setMyArray ] = useState([]);

  const handleChange = (e) => {
    let val = e.currentTarget.value          // get input value
    setInputVal(val);                        // set it to state
    let newArray = [];                       // build a new array
    for (let i = 0; i < val; i++) {          // for each between 0-val...
      newArray.push({                            // push obj to array
        label: i + 1,
        value: i + 1,
      })
    };
    setMyArray(newArray);                    // set the array to state
  }

  return (
    <div className="App">
      <input 
        value={inputVal}
        onChange={handleChange}
        />
        <p>
          {JSON.stringify(myArray)}
        </p>
    </div>
  );
}

I reread your question and see if that you are interested in knowing how to pass props. So I've reworked my above example to show how you might ingest a string from an input, and use that to build (and show) your array.

import React, { useEffect, useState, useCallback } from "react";

/**
 * EgChildComponent -- Function
 * An example of how to pass state to a child component
 * @param {number} inputVal The value of the input.
 * @return {JSX.Element} A list of styled paragraph with your content
 */
const EgChildComponent = ({ inputVal }) => {
  
  const [myArray, setMyArray] = useState([]);

  const updateArray = useCallback((val) => {
    let newArray = []; // build a new array
    for (let i = 0; i < val; i++) {
      // for each between 0-val...
      newArray.push({
        // push obj to array
        label: i + 1,
        value: i + 1
      });
    }
    setMyArray(newArray); // set the array to state
  }, [setMyArray]);

  useEffect(() => {
    if (myArray.length.toString() !== inputVal) {
      updateArray(inputVal)
    }
  }, [inputVal, myArray.length, updateArray]);

  const aChild = (childItem) => {
    return (
      <p key={`child-${JSON.stringify(childItem)}`}>
        <b>Label: {childItem.label}</b>, value: {childItem.value}
      </p>
    );
  };

  return <>{myArray.map((item) => aChild(item))}</>;
};


/**
 * Parent component where the value is set, and passed
 * to the child via props, which then dynamically updates
 * the array as desired.
 */
export default function App() {
  const [inputVal, setInputVal] = useState("");

  const handleChange = (e) => {
    let val = e.currentTarget.value; // get input value
    setInputVal(val); // set it to state
  };

  return (
    <div className="App">
      <input value={inputVal} onChange={handleChange} />
      {inputVal !== '' && (
        <EgChildComponent inputVal={inputVal} /> 
      )}
    </div>
  );
}

Working CodeSandbox: https://codesandbox.io/s/stack-66696633-updatedarray-vm3rm

Yosef Tukachinsky · Accepted Answer · 2021-03-18 18:15:51Z

0

Not sure if I understand you right, but I guess this?

const getArr = (x) => Array.from(Array(+x),(_,i)=>({label:String(i+1),value:String(i+1)}))
console.log('Total markers 3:');
console.log(getArr('3'));
console.log('Total markers 5:');
console.log(getArr('5'));
console.log('Total markers 10:');
console.log(getArr('10'));

edited Mar 18, 2021 at 18:15

answered Mar 18, 2021 at 18:10

Yosef Tukachinsky

5,9051 gold badge15 silver badges32 bronze badges

Collectives™ on Stack Overflow

React - Construct a numeric array for a component to a dynamic number

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related