CODEWITHSUNDEEP
javascripthtmlreactjs
octaviandd
octaviandd

Reputation: 169

Options for data-attributes react

I got an app that requires more API calls, so I have my first API call than gets me 20 Objects in which, every object has an independent ID. The second API call is made on the first's call object's IDs.

So my component: 

<div>
      <table cellSpacing="0">
        <thead>
          <tr></tr>
        </thead>
        <tbody>{branded_food_data}</tbody>
      </table>
      <br></br>
      <table cellSpacing="0">
        <thead>
          <tr></tr>
        </thead>
        <tbody>{common_food_data}</tbody>
      </table>
    </div>

common & branded are 

 <td className="single" style={{ width: "300px" }}>
      <span>{name}</span>
      <img
        src={thumbnail}
        alt="thumb"
        height="25px"
        width="25px"
        style={{ float: "right", marginRight: "5px", borderRadius: "1px" }}
      ></img>
    </td>

common and branded are from the first API call and contain the IDs for the second API call.

Now, I want to set react to make the second API call whenever someone clicks on one item() of the rendered common/branded, so I'm thinking the only way I can do it is to get the ID from the first call and set a data-attribute on each so when I click on it, I will set the state in my main component for the ID and fetch that data on that ID. Is there any alternatives to this as I read that is not good practice.

TL:DR

COMPONENT -> (a)API CALL -> {NAME / ID} -> RENDER(multiple TABLEROWS) -> CLICK ON ONE RENDERED TABLEROWS -> GET ID OF CLICKED TABLEROW -> (b)API CALL made on the ID OF CLICKED TABLEROW-> RENDER

How do i set the specific IDS from first call on each specific row?

Upvotes: 0

Views: 347

Answers (1)

thor83
thor83

Reputation: 96

The answer here might depend on how you want the UX to work in your App and how you want to design the data fetching.

For example, clicking on a row could simply be link (or you could have code to manually fetch the data and update the URL), which updates the URL of your app to /branded_food_data/:id_of_record. Assign a component to handle that router URL so you can fetch the data for that record and display it. Updating the URL and letting the router mount the needed component also lets you navigate directly to a specific record (deep link).

Even if you decide not to change the URL, you shouldn't need to use data attributes for this. As you are iterating over the rows, you can define an onClick handler and pass it the id attribute from each row you are rendering. E.g. below

const Table = ({rowsOfData, fetchById}) => (
  rowsOfData.map(({id, name}) => (
    <tr onClick={(e) => fetchById(id)}>
      <td>{name}</td>
      ...
    </tr>
  ))
);

In the parent of <Table />, you would need to fetch the initial rows of data and define a callback to fetchById. E.g.

const Main = (props) => {
  const [data, setData] = useState(null);
  const fetchById = id => ... // calls your endpoint and you handle the response
  const fetchInitial = () => ... // fetch initial rows without any id

  // only run this effect once, on initial mount
  useEffect(() => {
    fetchInitial().then(response => setData(response.data))
  }, []);

  return (
    <Table 
      data={data} 
      fetchById={fetchById} 
    />
  );
};

Upvotes: 1

Related Questions