CODEWITHSUNDEEP
reactjscomponents
Darren
Darren

Reputation: 77

React component displaying different props than given

I have created a minimized test site on codesandbox.io to illustrate my issue:

https://codesandbox.io/s/floral-glitter-ege9o?file=/src/functions/helperFunctions.js

It appears to me the component to which I am passing props receives props other than what I am providing. I would appreciate any assistance in understanding why this is occurring.

On the Home.js page, I am mapping over an array of items from the provided local data file (data/data.js). For this test, I display on the sandbox browser the id property of the data item being supplied as props to the component. I have also logged to the console the value of the prop within the map method. One may see, however, with a few sandbox browser refreshes that the two values do not always match.

Little Update (but still no answer) :

It seems to matter how I am preparing the data before mapping over it to create the TestCard component (as @Konstantin Modin suggested). Why should that matter? Of course, when I use the raw data before messing with it, it just displays all data in order without issue.

I need to be able to find only data that has images (in the real project data, some items in the data array don’t have images). and then randomize the selection to display different images on each page visit.

Upvotes: 0

Views: 116

Answers (3)

Darren
Darren

Reputation: 77

A programmer friend of mine assisted me with finding an answer to this. It seemed no matter how I pulled the code apart and inspected each line, or rewrote it as simpler methods and with simpler data, it still would not work.

His answer was to simply remove everything from inside the Home() function block in Home.js, except for the function's return statement for the display. I moved every line of code up above the Home() function and all data showed integrity at every line.

Why this worked, however, for me is still a mystery. I will definitely continue my research into it. If anyone seeing this has time to share their thoughts, I would certainly appreciate it.

Upvotes: 0

Konstantin Modin
Konstantin Modin

Reputation: 1333

I think helper function getItemsList makes some mutations. Without it it works :

import React from "react";
import phases_data from "./../data/data";

function TestCard(props) {
  console.log("test card", props.src);
  return <div>{props.src}</div>;
}

function Home() {
  const items = phases_data;
  
  const test = items.map(item => Object.values(item.cards).find(
    (item) => Array.isArray(item) && item[0].type === "image"
  )).map(item => {
    console.log('test',item[0].filename)
    return <TestCard key={item[0].filename} src={item[0].filename} />
});


  console.log("test", test);
  return (
    <div className="container_centered home_page">
      <div className="image_grid">{test}</div>
    </div>
  );
}

export default Home;

Also I would simplify data-structure

Upvotes: 1

Viet
Viet

Reputation: 12787

Because you were using test as a function, not a React component:

{test}

That lead to unwanted behavior. Should use something like <Test/>. I have created a trimmed down, minimal sample. The values logged/displayed are the same: https://codesandbox.io/s/nervous-jones-tzuod?file=/src/pages/Home.js:0-866

Upvotes: 0

Related Questions