How to send a property from an array of object from a child component to the parent component?-CodePudding

I have App, that is the parent component and I have the Child component:

The Child component gets a props called items so it can be reused depending on the data. It the example there is data, data1 and data2.

The thing is that I want to set a cookie from the parent component, to set the cookie I need the property link from data2, but I am already mapping data2 in the Child component.

What can I do to obtain the value of the property link in the parent component to pass it as an arguement here:

<Child
  onClick={() =>
    handleUpdate('How can I obtain here the string from link of data2?')
  }
  items={data2}
/>

This is the whole example code:

import * as React from 'react';
import './style.css';

const data = [
  { title: 'hey', description: 'description' },
  { title: 'hey1', description: 'description' },
  { title: 'hey2', description: 'description' },
];

const data1 = [
  { title: 'hey', description: 'description' },
  { title: 'hey1', description: 'description' },
  { title: 'hey2', description: 'description' },
];

const data2 = [
  { title: 'hey', link: 'link/hey' },
  { title: 'hey1', link: 'link/he1' },
  { title: 'hey2', link: 'link/he2' },
];

export default function App() {
  const [, setCookie] = useCookie('example');

  const handleUpdate = (cookie) => {
    setCookie(null);
    setCookie(cookie);
  };

  return (
    <div>
      <h2>App - Parent</h2>
      <Child items={data} />
      <Child items={data1} />
      <Child
        onClick={() =>
          handleUpdate('How can I obtain here the string from link of data2?')
        }
        items={data2}
      />
    </div>
  );
}

export function Child({ items }) {
  return (
    <div>
      <h2>Child</h2>
      <ul>
        {items.map((item) => {
          return (
            <>
              <p>{item.title}</p>
              <a href={item.link}>Go to title</a>
            </>
          );
        })}
      </ul>
    </div>
  );
}

Thank you!

CodePudding user response：

The map method doesn't change the array that it is called on, it just returns a new array, do the items array doesn't get affected at all here, so you can just call it normally like so:

return (
    <div>
      <h2>App - Parent</h2>
      <Child items={data} />
      <Child items={data1} />
      <Child
        onClick={() =>
          handleUpdate(data2[0].link)
        }
        items={data2}
      />
    </div>
  );

Also, your Child component needs to accept the onClick function as a prop like so:

export function Child({ items, handleClick }) {
  return (
    <div onClick={handleClick}>
      <h2>Child</h2>
      <ul>
        {items.map((item) => {
          return (
            <>
              <p>{item.title}</p>
              <a href={item.link}>Go to title</a>
            </>
          );
        })}
      </ul>
    </div>
  );
}

CodePudding user response：

If you want to get the link from the Child component you can simply add a link parameter in the callback:

<Child
 onClick={(link) => handleUpdate(link)}
 items={data2}
/>

Then from the Child you just need to call the onClick prop:

export function Child({ items, onClick }) { // here make sure to add the prop while destructuring

<a href={item.link} onClick={() => onClick(item.link)}>Go to title</a>