Options for data-attributes react

Question

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?

thor83 · Accepted Answer · 2020-02-08 22:07:52Z

1

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} 
    />
  );
};

edited Feb 8, 2020 at 22:07

answered Feb 8, 2020 at 21:32

thor83

964 bronze badges

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

3 Comments

octaviandd Over a year ago

I'm not sure if I understand. So I want to do a first API call of a simple name 'eggs' in which I get 20 objects(anything similar to term 'eggs'), each of these 20 items have a specific ID(ex: 7asdqwd712ndci) in the API call. First, I render these 20 items then I wait for a click on whatever item, when the click happens I want to push the second API call made on the ID from the first API call (user clicks on item 7, i need to get item 7 ID and do the second API call on that ID) How do i set the IDS of each item after the first API call so I know what to fetch in the second API call?

thor83 Over a year ago

How you get the IDs depends on how your data is structured and your API response structure. You gave the example of user clicking on item with ID of 7. When you are rendering item 7, you can bind a click handler and pass the ID to the handler (see my answer for the example). This assumes that you know the ID of each item as you're iterating over and rendering. It assumes your first API call response includes an array of items and that each item has an ID. If it does, then you can pass the ID to a click handler as shown in my answer.

thor83 Over a year ago

As a debugging step, you could try adding an onClick handler to every tr and using console.log to see the item that was clicked. You should see all the info about the current item including the ID if present.

Collectives™ on Stack Overflow

Options for data-attributes react

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related