How to add filter to react in conjunction with map?

Question

React

there is a code that displays 6 jokes. question-answer format
How to add a filter by removing the question from the output, if the length of the question is more than 50 characters.
I've tried something like .filter(joke => joke.question < 50) and stuff like that, but it gives me a blank page or errors. I'm obviously missing something.

function App() {
 	const jokeComponents = jokesData
// единственный фильтр который у меня получилось добавить :(  = c ним будет 3 шутки выводится.  
 	.filter(joke => joke.id <= jokesData.length-3)
// если выводить сначала map, а после filter будет белая страница, тоже интересно было бы знать почему так?
  .map(joke => <Joke key={joke.id} question={joke.question} punchLine={joke.punchLine} />)
    return (
        <div>
            {jokeComponents}
        </div>
    )
}

Answer 1

Learn js first, then react. And learn to debug. Try to output to the console what comes into the filter before the map, and what comes after. Read up on how to access the length of a string, that's it.
learnjavascript.ru to help you.