Как добавить filter в react в связке с map?

Question

[Владимир]

есть код, выводит 6 шуток. формата вопрос-ответ
Как добавить filter убрав из вывода question, если допустим в вопросе длинна больше 50 символов.
я пробовал что-то типо такого .filter(joke => joke.question < 50) и всякого подобного, но выводит пустую страницу или ошибки. Явно что-то упускаю.

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

[abberati]

Учите сначала js, а потом react. И дебажить учитесь. Попробуйте вывести в консоль то, что приходит в фильтр до мапы, а что приходит после. Почитайте, как обращаться к длине строки, вот это всё.

learnjavascript.ru вам в помощь.

Comments

[Владимир]

я пробую искать но не могу понять (найти) как обратиться к длине строки значения question
который лежит в массиве. joke.question.length и тому подобное не работает.

const jokesData = [
    {
        id: 1,
question: "What's the best thing about Switzerland?",
        punchLine: "It’s hard to explain puns to kleptomaniacs because they always take things literally."
    },

[abberati]

Владимир, вы не показали, какой код не работает. Получение длины строки через length работает.

[Владимир]

abberati, я протестил в jsfidle .filter(joke => console.log(joke.question.length))

и мне выводит значения.
1ый вопрос 40 символов а второй 43.
если .filter(joke => alert(joke.question.length > 40)) = вывеодит false true

но конструкция

const jokeComponents = jokesData
.filter(joke => alert(joke.question.length > 40))

.map за ним в create reactapp у меня не работает.

Тебе если не сложно ты мне поясни как оно должно быть, а то я не хочу застревать на этом моменте.

[abberati]

Владимир, коллбэк в .filter должен возвращать результат. Вы возвращаете undefined, что соответствует false, поэтому в результате фильтрации получается пустой массив. А .map пустого массива — это пустой массив.

[Владимир]

abberati, мне вроде как подсказали и теперь фильтр работает
тут типо если в шутке нет вопроса или длина меньше 45 тогда показывает.

.filter( joke=> !joke.question || joke.question.length < 45) 
.map(..... code

Но в конструкции .filter( joke=> joke.question.length < 45) с одним условия возврата вернуть вопросы с длинной меньше 45 у меня неработало ничего и я сгорел.

или например другой синтаксис

.filter(joke => {
  if (!joke.question || joke.question.length < 45) return true;
  return false;
})
.map(/.....

если так же убрать из if >>>> !joke.question || оставив только условие длины то ошибки.
Я чет видимо не так понимаю.

[abberati]

Владимир, ну дебажьте, смотрите, что приходит на конкретной итерации, что приводит к ошибке, гуглите ошибку, это быстрее, чем ждать ответ на тостере.

[Владимир]

abberati, я думаю я потом к этому вернусь.
Я вот просто кучу дней уже про массивы читаю и все в голове запуталось.
Вот например в доках в mozila

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];
const result = words.filter(word => word.length > 6);

Я вижу это точно так же как и .filter( joke=> joke.question.length < 45)
joke параметр = это мой массив объектов. А joke.question это вопросы со строками и условие меньше 45 символов длинны. Точно такая же конструкция ведь.
Возомжно это из за того что в одном из объктов нету question и поэтому нужно доп условие
!joke.question = надеюсь я прав.

[abberati]

Владимир, не возможно, а точно из-за этого. И вы только через сутки после публикации вопроса об этом упомянули.

[Владимир]

abberati, я думал фильтр и так будет перебирать массив.
В таком варианте например нету отрицания но вместо || &&
.filter(({ question })=> question && question.length < 45)

[abberati]

Владимир, учите js, как я и написал в ответе.

Просто отметьте ответ решением и закончим.