错误：对象作为 React 子对象无效。 如果您打算渲染一组子项，请改用数组。 从 JSON 获取数据

Question

guys! I'm using ReactJS to create a small website. Since I added the following code it starts showing an error: Objects are not valid as a React child. If you meant to render a collection of children, use an array instead.

Code:

import { useState, useEffect } from 'react';
import { motion, useAnimation } from 'framer-motion';
import './css/App.min.css';
import config from './config';

function App() {
  return (
    <div className="myskills">
      <Skills skillType="coding" />
    </div>
  );
}

function Skills(props){
  const skillType = props.skillType;
  const result = config.skills.filter(skill => skill.cat == skillType);
  console.log(result);
  result.map((skill, index) => (
    <div className="singleSkill" key={index}>
      {skill.name} Level: {skill.level}
    </div>
  ));
  return (<div>{result}</div>);
}

config.json

{
  "skills": [
    {
      "name": "HTML",
      "level": 5,
      "cat": "coding"
    },
    {
      "name": "CSS",
      "level": 5,
      "cat": "coding"
    },
    {
      "name": "PHP",
      "level": 4,
      "cat": "coding"
    }
  ]
}

Any ideas what's the problem?

Answer 1

The return statement in your Skills component is basically just this:

return (config.skills.filter(skill => skill.cat == skillType));

hence the "Objects are not valid as a React child" error.

Since result.map doesn't modify the original array, a better solution might look something like this:

function Skills(props) {
  const skillType = props.skillType;
  const result = config.skills.filter(skill => skill.cat == skillType);
  return (
    <div>
      {result.map((skill, index) => (
        <div className="singleSkill" key={index}>
          {skill.name} Level: {skill.level}
        </div>
      ))}
    </div>
  );
}