Как разбить текст на строки?

tempick, а со скроллом я и сам знаю как поступать. На вот этом вот застрял

Как разбить текст на строки?

tempick, в том то и проблема, что на сервере ничего разбиваться не будет

Как разбить текст на строки?

Мне нужно сделать эффект построчного появления текста при скролле. Каким иным образом это тогда можно сделать?

Как перерендерить контент после изменения значения стейта?

о, и еще лишнее нашел. лол, почему только сейчас я это нахожу)

Как перерендерить контент после изменения значения стейта?

Undefined User, о, дидапдейт лишний. так бы и не заметил)

Как перерендерить контент после изменения значения стейта?

Denis Masson, я уже решил эту проблему. Она заключалась в том, что после нажатия на фильтр на экране не происходило ровным счетом ничего. Решил вот так:

import React, { Component } from 'react'

import Items from '../items'
import Filters from '../filters'
import Service from '../../services'

export default class Shop extends Component {

    KubicService = new Service()

    state = {
        filtered: "all",
        items: {},
        filters: {}
    }

    componentDidMount() {
        this.KubicService.getCategories()
        .then((result) => {
            this.setState({
                filters: result.data
            })
        })

        this.KubicService.postCatalog()
        .then((result) => {
            this.setState({
                items: result.data
            })
        })
    }

    componentDidUpdate() {
        
    }

    onFilterClick = (e) => {
        const cats = {...this.state.filters}
        const itemId = e.target.id
         if(itemId == 'all') {
            this.setState({
                filtered: 'all'
            })
         } else {
             this.setState({
                 filtered: cats[itemId].id
             })
         }
        }

    render(){

        const items = {...this.state.items}
        const arr = Object.values(items)
        let filteredItems = {...this.state.items}
        if(typeof this.state.filtered == 'number') {
            filteredItems = arr.filter((item) => this.state.filtered == item.category.id)
        } else {
            filteredItems = {...this.state.items}
        }

        return(
            <div>
                <Filters categories={this.state.filters} onFilterClick = { this.onFilterClick }/>
                <Items items = { filteredItems  } />
            </div>
        )
    }
}

import React from 'react'

const Items = (props) => {

        const arr = Object.values(props.items)

        const elements = arr.map((item, index) => {
            let url = ''
            if(item && item.preview_image) {
                url = 'http://******'
                url = url + item.preview_image
            }
            return (
                <div key={index} className='store-item'>
                    <img className='store-item__img' src={url} alt='item img'></img>
                    <h3 className='store-item__title'>{item.name}</h3>
                    <h3 className='store-item_price'>${item.price}</h3>
                </div>
            )
        })
        
        return (
            <div className='store-items'>
                { elements }            
            </div>
        )
    }

export default Items

import React from 'react'

const Filters = (props) => {

    const arr = Object.values(props.categories)

    const filters = arr.map((item, index) => {
        return(
            <button className='category btn' key={index} id={index} onClick={ props.onFilterClick }>{item.name}</button>
        )
    })

        return(
            <div className='store-filters'>
                <div className='filter-category'>
                    <div className='categories'>
                    <button className='category-all btn' id="all" onClick={ props.onFilterClick }>all</button>
                        { filters }
                    </div>
                    <select className="filter">
                        <option className='filter-variable'>Price: high to low</option>
                        <option className='filter-variable'>Price: low to high</option>
                    </select>
                </div>
            </div>
        )
    }

export default Filters

Как указать длину label внутри input checkbox?

Undefined User, не знаю, как я упустил это, но в этом и состояла проблема

Как указать длину label внутри input checkbox?

Да, именно это и было причиной, забыл написать ответ.

Как указать длину label внутри input checkbox?

Steppp, здесь не будет никаких введенных данных, это чекбокс как бы 0_о. Про length и width прям очень полезно, спасибо, от души просто. Я привык называть width длиной, сам не знаю почему, но это не повод корчить из себя самого умного, я и сам на достаточном уровне владею английским. Никаких вложений button здесь я не вижу, вы перепутали тег с классом. Зачем учить кого-то, если человек всего-лишь попросил помочь с указанием размеров, особенно если вы не можете отличить тег от класса и поле ввода от чекбокса?

Сверстал первую часть макета, и пожалуйста, можете дать советы, по оптимизации/улучшении моего кода?

Я этот макет верстал очень давно, мой первый сверстанный сайт
https://enygf.github.io/
На, посмотри что и как я делал, но у меня тоже не идеально. Я тебе больше скажу, сейчас мне стыдно на этот код смотреть, но что-то полезное ты точно там найдешь. Ну я надеюсь...

Как отследить событие скроллинга для поэкранной прокрутки?

Огромное спасибо