"Objects are not valid as a React child" and linters

Question

I have an issue about a simple component and I don't know why. Here is my error and my code :

Error: Objects are not valid as a React child (found: object with keys {Cfor, children}). If you meant to render a collection of children, use an array instead.

import React from 'react';
import './Label.css';

export default function Label(Childn, Cfor) {
  return (
    <label className="label mr-10" htmlFor={Cfor}>
      {Childn}
    </label>
  );
}

I used some linters and I'm trying to follow the style guide of airbnb. But in another branch of my project which hasn't the linters, this code works. So I guess it's a problem of compatibility with the linters. Here is my devDependencies and my .eslintrc.json

  "devDependencies": {
    "eslint": "^7.13.0",
    "eslint-config-airbnb": "^18.2.1",
    "eslint-plugin-import": "^2.22.1",
    "eslint-plugin-jest": "^24.1.0",
    "eslint-plugin-jsx-a11y": "^6.4.1",
    "eslint-plugin-react": "^7.21.5",
    "eslint-plugin-react-hooks": "^4.2.0",
    "stylelint": "^13.7.2",
    "stylelint-config-standard": "^20.0.0"
  }

{
    "env": {
        "browser": true,
        "es2021": true,
        "jest": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "airbnb",
        "airbnb/hooks"
    ],
    "parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12,
        "sourceType": "module"
    },
    "plugins": [
        "react"
    ],
    "rules": {
    }
}

How can I fix that? Some has an idea?

Hey Billy, you need to destructure the keys like this: `Label({ Childn, Cfor })` — Yash Joshi, Nov 12 '20 at 10:53

score 2 · Answer 1 · answered Nov 12 '20 at 10:54

Functional components' first parameter should be props which is an object. then you access children or other props from it

export default function Label(props) {
  const { children, Cfor } = props;
  return (
    <label className="label mr-10" htmlFor={Cfor}>
      {children}
    </label>
  );
}

In addition, you cannot render an object directly. Instead you can render JSON.stringify(object)

score 1 · Answer 2 · answered Nov 12 '20 at 10:54

1

import React from 'react';
import './Label.css';

export default function Label({Childn, Cfor}) { // <--- attention
  return (
    <label className="label mr-10" htmlFor={Cfor}>
      {Childn}
    </label>
  );
}

answered Nov 12 '20 at 10:54

DucHT

361
1
3
10

Thx for your answer! I can destructure indeed. But I have a question about one of my props, Childn. I cannot use this name, I have to use 'children'. I don't understand why. I mean it doesn't matter, it's just a node right? – Billy B Nov 12 '20 at 11:22

"Objects are not valid as a React child" and linters

2 Answers2