historydev

function Box() {
  return(
    <>
      <p>Box Component</p>
    </>
  )
}

-function List({ component }) {
+function List({ Component }) {
  return(
    <>
-      <component />
+     <Component />
    </>
  )
}

function App() {
  return(
-    <List component={Box}  />
+   <List Component={Box}  />
  )
}

https://playcode.io/1906046

Написано на главной странице https://redux.js.org/

Это событие формы:
onSubmit={addJournalItem}

Это функция которая получает данные из формы:
const addJournalItem = (e) => {

Это функция которая что-то делает с данными которые передаёт ей addJournalItem:
onSubmit(formProps)

Ты при клике изменяешь состояние squares, заменяешь массив на "X", все твои компоненты Square слушают состояние squares через пропсы, соответственно он везде и будет "X".

Если тебе нужно инкапсулировать состояние squares, перенеси его в компонент Square как и обработчик клика.

Вот так нужно, не надо говно-кодить какую-то коммуникацию между редуксом и стейтами реакта

useEffect(  ()=>{
  axios.post('https://example/', payKey.data, mesKey.data).then(console.log).catch(console.error)
},[])

const arr = [];
const len_items = 10;
for(let i = 0; i<len_items; i++) {	
  arr.push(i);
}
console.log(arr) // set state

useEffect(() => {
   setLessons(prev => [...prev, ...lessons2])
}, [setLessons])

<img src={star} alt="star" onClick={() => addFavoriteChanel(index)} id={index} className={`star ${favorite <b>=== index</b>  ? 'active' : ''}`} />

const [favorite, setFavorite] = useState(0);

const addFavoriteChanel = (index) => {
        if(favorite === index) { 
            setFavorite(0);
        } else {
            setFavorite(index)
       }
    }

Во первых:

{ questionnaireSteps.contactUs && (<StepOneForm
        statusStepOneForm={(value) => {setQuestionnaireSteps({...questionnaireSteps, contactUs: value}); console.log(value)}}
        statusSmsPhone={(value) => setQuestionnaireSteps({...questionnaireSteps, phoneNumberVerification: value})}
        phoneNumber={setPhoneNumber}
    />)}

Во вторых:

const myFunc = (type, value) => {
     console.log(value)
     if(type === 'step') setQuestionnaireSteps({...questionnaireSteps, contactUs: value});
     if(type === 'sms') (value) => setQuestionnaireSteps({...questionnaireSteps, phoneNumberVerification: value})
};
{ questionnaireSteps.contactUs && (<StepOneForm
        statusStepOneForm={value => myFunc('step', value)}
        statusSmsPhone={value => myFunc('sms', value)}
        phoneNumber={setPhoneNumber}
    />)}

В третьих что передаётся в это value и откуда?

Здесь не сокет, а сервер.

const socket = io("https://server-domain.com");

Юзайте хост по типу

localhost:3000

Ну смотри, создаёшь таблицу с постами, работаем с id.

id = int - auto_increment

Следом выводим на страницу постов, пока сделай общую страницу, чтобы избежать головоломки (поверь мне)

Добавь кнопку "репост" допустим.

Создай роут на экспрессе /repost допустим с типом POST

В1 - Добавь таблицу юзеров где одним из полей будет reposts

В2 - создай таблицу под репосты где указывай id юзера + id поста

Если В1 - вытаскивай из этого столбца данные, пуш туда новые id и записывай

Если В2 - тоже самое, только по полям с id - юзер и parent_id - id поста.

const el = React.createRef();
const [height, setH] = useState();

useEffect(() => setH(el.current.style.height));

<div ref={el} />
<div style={{height: height}}/>

Короче расклад такой - нужно обращаться к каждому элементу отдельно, по крайней мере это работает для меня:

<div className={styles.social}>
                        <div className={`${styles.socItem} fab fa-vk`} onClick={(e) => activeSoc(e, 'vk')}/>
                        <div className={`${styles.socItem} fab fa-twitter`} onClick={(e) => activeSoc(e)}/>
                        <div className={`${styles.socItem} fab fa-telegram`} onClick={(e) => activeSoc(e)}/>
                        <div className={`${styles.socItem} fab fa-facebook`} onClick={(e) => activeSoc(e, 'facebook')}/>
                        <div className={`${styles.socItem} fab fa-google`} onClick={(e) => activeSoc(e)}/>
                        <div className={`${styles.socItem} fab fa-yandex`} onClick={(e) => activeSoc(e)}/>
                        <div className={`${styles.socItem} fas fa-envelope`} onClick={(e) => activeSoc(e)}/>
                    </div></button>

Разобрался, вот здесь нужно добавить exact

<Route exact path='/'>
                        <Header />
                        <GetMain />
                        <Footer />
                    </Route>

Если юзаете хуки, то есть функции, то так:

export default function MyComponent() {
   const handleClick = e => console.log(e.target.innerText);

   return (
      <button onClick={handleClick}/>
   )

}

А реализовать массив объектов и пройтись по нему запретили в стране?

Реакт запускает сервер для разработки, если соберёте билд командой npm run build, там будет статика, можно и в php юзать и к ноде подрубить. Внимательно прочитайте документацию.

Не:
import headerScss from './headerStyle.scss';
А:
import './headerStyle.scss';