javascript - Export array with props input in React

Question

I'm currently creating a React app, and in it I want to be able to reference an array of values in any file I import the array. However, I want the array to be filled with values that are passed from another file via props. How can I do this? My array will always have the same number of values. Currently, my App.js file is structured something like this:

App.js:

import React from 'react'
import Array from './Array'

function App() {
    return (
        <div>
            <Array valOne="7" valTwo="10" valThree="2" valFour="19"/>
        </div>
    );
}

Essentially, I want to be able to call <Array /> with the four props in App.js, which would then set the values of that array listData to be those four numbers, which I could then call in other files as import listData from './listData' and reference each value as listData[1], etc.

Answer 1

I made a small repl here: https://repl.it/talk/share/Stackoverflow-65599500/113403

If your are not getting access, look at the image link in the bottom.

What you are trying does acctually not make sense. You need to pack your array values into something that can be showed in html. My repl showcases that.

Array is an javascript object and not a react object. React is just a wrapper around html.

I did show case that with that simple function called: ArrayView

But have a look at the repl and see if it makes sense

image of the code on repl