Как передать аргумент функции | React.js

Question

Как передать аргументы функции так, чтобы я мог вызвать эту функцию уже в другой компоненте с указанным аргументом, который также находится в этой компоненте. Я новичок, прошу строго не судить за некоторые непонятные отрывки кода! Мне нужно всего лишь чтобы при клике вызывалась функция, и внутри этой функции я мог указать параметр id, который находится во второй компоненте. Прошу, дайте ответ быстро!!!!!!!!!!!!!!!

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

// ПЕРВАЯ ВЛОЖЕННОСТЬ/ПЕРВАЯ КОМПОНЕНТА: !!!

const Main = (props) => {
  let Posts = props.data;

  let IsLoading = props.load;

  const items = [...new Array(6)]

  const [openPopup, setOpenPopup] = React.useState(false);

  function btnPopup(propsId){
    console.log(`Кнопка сработала. Ура! Вот id кнопки: ${dataPost[propsId]}`);
  }

  return (
    <React.ReactFragment>
      <main className="main">
        <section className="services">
          <div className="container-service">
            <div className="main_title">
              <h2 className="title_1"><a name="ourBlog">Наш блог</a></h2>
            </div>
            <div className="services_row">
              {IsLoading ? Posts.map((el) => (
                  <div className="service_card" data-aos="fade-up">
                    <Preview btnFunction={btnPopup(el.id)} key={el.id} {...el} /> // Передавать функцию хочу вот сюда!!! В btnFunction!!!!
                  </div>
                ))
              : items.map((el, index) => (
                <Skeleton key={index}/>
              ))}
            </div>
          </div>
        </section>
        <section className="portfolio">
          <div className="container">
            <div className="portfolio_title">
              <h2 className="title_1"><a name="places">Места</a></h2>
            </div>
            <div className="project" data-aos="flip-up"></div>
          </div>
        </section>
      </main>
      <Contact />
    </React.ReactFragment>
  );
};

export default Main;

// ВТОРАЯ ВЛОЖЕННОСТЬ/ВТОРАЯ КОМПОНЕНТА: !!!

function Post(props) {
  const MassiveOfColors = ['#1eb039', '#b01e1e', '#201eb0', '#1ea6b0'];

  const MassiveOfCategories = ['Другое', 'Места', 'Мысли', 'Познавательное'];

  return (
    <div className="previewPost">
      <div className="previewPostTitle" data-aos="fade-right">
        <h2>{props.Title}</h2>
      </div>
      <div className="previewPostDescription">
        <div className="previewPostDescriptionText">
          <p>{props.Description}</p>
        </div>
      </div>
      <div className="previewPostButton">
        <button>Открыть полностью</button>
      </div>
      <div className="previewPostData">
        <span>{props.Data + 'г.'}</span>
      </div>
    </div>
  );
}
export default Post;

БЛОГ НА HUSL

Как передать аргумент функции | React.js

Ответы (0 шт):