How to get rid of the error "The above error occurred in the component:?

Question

React

When I tried to refactor the code, output the repeating value to the function, I get an error

The above error occurred in the <Lesson> component:
    in Lesson (created by Calendar)
    in tr (created by Calendar)
    in tbody (created by Calendar)
    in table (created by Calendar)
    in div (created by Calendar)
    in Calendar

Consider adding an error boundary to your tree to customize error handling behavior.
Visit https://fb.me/react-error-boundaries to learn more about error boundaries.

Uncaught Error: A cross-origin error was thrown. React doesn't have access to the actual error object in development. See https://fb.me/react-crossorigin-error for more information.
    at Object.invokeGuardedCallbackDev (react-dom.development.js:626)
    at invokeGuardedCallback (react-dom.development.js:476)
    at renderRoot (react-dom.development.js:10908)
    at performWorkOnRoot (react-dom.development.js:11556)
    at performWork (react-dom.development.js:11509)
    at requestWork (react-dom.development.js:11420)
    at scheduleWorkImpl (react-dom.development.js:11274)
    at scheduleWork (react-dom.development.js:11231)
    at scheduleTopLevelUpdate (react-dom.development.js:11735)
    at Object.updateContainer (react-dom.development.js:11773)

But I don't understand what I'm doing wrong. The last thing I came up with was writing like this

function Lesson(props){
  try{
    data.map((lesson, i) => {
      let date = new Date(lesson.startTime);
      let time = `${date.getHours()}:${(date.getMinutes()<10?'0':'')+date.getMinutes()}`;
      if(lesson.room === 'Комната 1' && time === '9:00'){
        return(
          <td key={i}>
            <div className='lesson'>
              <p>{lesson.title}</p>
              <p>{lesson.teacher}</p>
              {lesson.participaints.map(participaints => {
                return <p key={participaints.toString()}>{participaints}</p>
              })}
            </div>
          </td>
        ) 
      }
    })  
  } catch(e){
    console.log(e);
  }
}

Well, accordingly, I tried to display this block in div and not through td, but without success.
And in the output class I output it like this

class Calendar extends React.Component
{
  render(){
    return(
....
<Lesson room='Комната 3' time='9:30'/>
....
)}
}

The whole code is here https://codepen.io/rusline/pen/NyBYVY?editors=0011

Answer 1

Well, at least you need to return something from your Lesson. That is, it should be not just data.map, but return data.map.