[React] Uncaught Error: Objects are not valid as a React child (found: object with keys {id, title, taskType, status, schedule, startDate, endDate, requirements, overview, notes}). If you meant to render a collection of children, use an array instead.

왜?

컴포넌트의 자식으로 렌더링할 때 객체를 직접 자식 요소로 전달했기 때문에 발생한다. React는 문자열, 숫자, 배열, React요소를 자식으로 랜더링 할 수 있지만, 객체를 직접 랜더링할 수 없다.

ohmy..

코드를 확인해보니. 리스트안에 객체가 담겨있었다. 그 객체를 바로 랜더링 하려고 하니 리액트는 랜더링 할 수 없다고 이야기하는 것이였다. 근데 나는 이 컴포넌트를 공용으로 사용하고 있기 때문에, 좀 더 효율적으로 사용하고 싶었다. 그래서 props에 그 object의 key를 전달 하는 방향으로 방향을 잡았다.

내 코드

현재 드롭다운 컴포넌트를 하나 만들어서 이곳 저곳 사용하고 있다.

import { useState } from 'react';

const DesignedDropdown = ({ options, label, onSelect, displayKey }) => {
    const [isDropdownOpen, setIsDropdownOpen] = useState(false);
    const [selectedOption, setSelectedOption] = useState(label);

    const toggleDropdown = (event) => {
        event.preventDefault();
        setIsDropdownOpen(!isDropdownOpen);
    };

    const handleSelect = (option) => {
        setSelectedOption(option[displayKey] || option);
        onSelect(option[displayKey] || option);
        setIsDropdownOpen(false); // 선택 후 드롭다운 닫기
    };

    return (
        <div className="dropdown-group">
            <div className={`dropdown ${isDropdownOpen ? 'active' : ''}`}>
                <button className={`dropdown-btn ${isDropdownOpen ? 'active' : ''}`} data-target="dropdown2" onClick={toggleDropdown}>{selectedOption}</button>
                <div className={`dropdown-content ${isDropdownOpen ? 'show' : ''}`} id="dropdown2">
                    {options.map((option, index) => (
                        <a href="javascript:void(0);" key={index} onClick={() => handleSelect(option)}>
                            {option[displayKey] || option}
                        </a>
                    ))}
                </div>
            </div>
        </div>
    );
};

export default DesignedDropdown;

여기서 중요한건 displayKey 부분이다. 원하는 키를 받아서 사용하는 컴포넌트에 원하는 값을 지정할 수 있게 만들었다.

해결

아주 잘 잘 작동한다.!