React error - "is missing in props validation"

Question

it is the first time I got this error, I never had this error back in my previous react-app project which I did two months ago

The error says that: 'column.title' is missing props validation 'column' is missing props validation" column is props from parent element, I used destructuring to that props.column

I used eslint that tells me this type of error... just for additional info

this is the App.js:

import React from 'react';
import Column from './Column';
import { initialData } from './initial-data';

const App = () => {
  const [Data] = React.useState(initialData);

  React.useEffect(() => {
    console.log(Data);
  }, [Data]);

  return Data.columnOrder.map((dataId) => {
    const { tasks, columns } = Data;
    const column = columns[dataId];
    const tasksData = column.taskIds.map((taskId) => tasks[taskId]);

    return <Column key={column.id} column={column} tasks={tasksData}></Column>;
  });
};

export default App;

this is Column.js: ---> which I got the error from

import React from 'react';
// import styled from 'styled-components';

// const Container = styled.div``;
// const Title = styled.h3``;
// const TaskList = styled.div``;

const Column = (props) => {
  const { title } = props.column;  --> 'error is in this line'

  return <p> {title} </p>;
};

export default Column;

Answer 1

I think, problem is eslint wants to you use PropTypes.

You need to add after Column component something like this (but with your props properties):

Column.propTypes = {
    column: PropTypes.shape({
        title: PropTypes.string
    })
};

Also, don't forget install prop-types.