0

I have built a sample project where I am receiving dynamic data from a back end server. The data is being stored in an array

Then I have built this input box component. 

//data_View is a functional Component
const  data_View = (props) =>
(

    <div className="form-input">

           <input style={{backgroundColor: `${props.backgroundColor}`}}
            type="text"
            name={props.dataId}
            value={props.content} 

        />
     </div>
);

data_View.propTypes = {
    dataId:PropTypes.string,
    content: PropTypes.string,
};

export default data_View;

And then in my App.js, depending on size of the array (which is static, currently 3) I am rendering data_View component e times, each with a different prop value , like this:

<div className="Data3">
                <data_View backgroundColor={this.state.bColor[2]}
                content = {this.state.value[2]} 
                name = "data3"
                />
            </div>

This works perfectly per my desire.

Next I tried replacing the input box with Card from Material-UI. In doing so I have learned that only one Card is being rendered at a time.

Unless I use map(), something like this as per the example I found...

const topics = [
   { 
      name: "data1",
      value: "3",
   },
   {
     name: "data2",
     value: "5"
   }

]
{topics.map(data=>(
            <Card style={{backgroundColor:`${props.backgroundColor}`}}>
                <CardActionArea >
                    <CardMedia
                       ...
                      />
                 </CardActionAre>
                 </Card>
))}

I can't figure out how can I refactor the above example to fit my scenario. I cannot create an array like the example because I am getting a stream of data from the server and that is constantly changing.

Any thoughts, suggestion is really appreciated.

Thank you

user1462617
  • 413
  • 1
  • 13
  • 23
  • `data_View` looks like it is a functional component, but what is `dataView`? I don't see it. Can you add it to the question, please? – Garrett Motzner Jun 02 '20 at 21:19
  • I'm also kinda confused, because you seem to imply that before you were automatically getting multiple input fields, but when you changed the `input`s to `Card`s that no longer worked. That is not something I would think would occur, because `input` elements don't automatically render multiple either. – Garrett Motzner Jun 02 '20 at 21:22
  • @GarrettMotzner I am sorry for the confusion. I have made edits to the post to clarify my problem as best as I can. Please note that I did not mean to say automatically render but rather I render the input component based on the size of the array (so if the array size is 3 then I call the input component data_View 3 times) and send array[index] value as a prop to data_View. – user1462617 Jun 02 '20 at 22:18
  • 1
    "stream of data from the server" - you will need to show how this is updating the app. – Richard Matsen Jun 02 '20 at 22:22
  • At some point, you will have to take data from your "data stream" and create an array of components for each item in that stream you wish to render. `map` is often the tool to do that, and works well for that purpose, but you can build the array components anyway you wish. When your "data stream" updates, you will then have to change that array of component to reflect to those changes. – Garrett Motzner Jun 03 '20 at 16:30
  • If you are asking for different ways to build the array of components, [this question](https://stackoverflow.com/questions/22876978/loop-inside-react-jsx) has a good number of answers on that topic. If that isn't the main crux of you question, but instead how to handle the incoming "data stream" and render it, please add that information to the question and clarify the title. Thanks :) – Garrett Motzner Jun 03 '20 at 16:35

0 Answers0