Блог

У меня есть /страницы/профиль.js, который вызывает элемент LovedOne, передавая значения из реквизитов. Отладка показывает, что эти значения являются допустимыми при передаче

 import React from "react";
import LovedOne from "../components/loved_one";

export const Profile = ({ loved_ones }) => {
  const [session, loading] = useSession();
  if (loading) return <div>loading...</div>;
  if (!session) return <div>no session</div>;

  return (
    <Layout>
      {session amp;amp; (
        <>
          <img src={session.user.image} className="avatar" />
          <h1>{session.user.name}</h1>
        </>
      )}
      {loved_ones.map((loved_one, index) => (
        <LovedOne
          key={index}
          firstname={loved_one.firstname}
          surname={loved_one.surname}
          email={loved_one.email}
        />
      ))}

      <style jsx>{`
        .avatar {
          width: 220px;
          border-radius: 10px;
        }
      `}</style>
    </Layout>
  );
};
 

Однако в /components/loved_one.js мой реквизит не определен

 import React, { useState, useRef } from "react";

export const LovedOne = ({ props }) => {
  const [setActive, setActiveState] = useState("");
  const [setHeight, setHeightState] = useState("0px");

  const content = useRef();

  function toggleAccordion() {
    setActiveState(setActive === "" ? "active" : "");
    setHeightState(
      setActive === "active" ? "0px" : `${content.current.scrollHeight}px`
    );
  }

  return (
    <div>
      <div className="row">
        <button
          className={`collection-item ${setActive}`}
          onClick={toggleAccordion}
        >
          <i className="fas fa-plus teal-text"></i>
        </button>
        <div className="col s2">
          {props.firstname} {props.surname}
        </div>
        <div className="col s2">{props.email}</div>
      </div>
      <div ref={content} style={{ maxHeight: `${setHeight}` }}>
        <span>some stuff</span>
      </div>
    </div>
  );
};

export default LovedOne;
 

Я пробовал передавать отдельные переменные и передавать весь объект loved_ones целиком. Я получаю ту же проблему.

Любая помощь очень ценится!

Вы пробовали передавать реквизит вместо {props} ?

потеряйте скобки, попробуйте этот способ:

 export const LovedOne = (props) => {