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

Question

[zlodiak]

У меня есть презентационная компонента, которая вложена в родительскую компоненту. Внутри презентационной компоненты используется локальный стейт. Это неправильный подход поэтому я хотел бы локальный стейт поднять в контейнерную компоненту и затем работать с ним через коллбеки презентационной компоненты.

Помогите пожалуйста это сделать. Проблема в том, что контейнерная компонента не представляет из себя ни объект, ни функцию. Следовательно я не могу в ней использовать хуки типа setState.

Page1.jsx:

import React, { useState } from 'react';

function Page1(props) {
  let textareaRef = React.createRef();
  
  const [state, setState] = useState({
    presentText: '',
  });

  function textareaSet() {
    props.setAppTextCreator(textareaRef.current.value);
    textareaRef.current.value = '';
  }

  function textareaChange() {
    setState({...state, presentText: textareaRef.current.value})
  }

  return (
    <div>
        <textarea 
          ref={ textareaRef }
          onChange={ textareaChange }>
        </textarea>
        <button onClick={ textareaSet }>send</button>
        <div>present: { state.presentText }</div>
        <div>memorized: { props.text }</div>
    </div>
  );
}

export default Page1;

Page1smart.jsx:

import {connect} from "react-redux";
import { setAppTextCreator } from '../../redux/appReducer';

import Page1 from './Page1';

const mapStateToProps = state => {
  return {
    text: state.appReducer.appText,
    presentText: state.presentText
  }
}

export default connect(mapStateToProps, { setAppTextCreator })(Page1);

Answer 1

[Антон Иванов]

Насколько я помню, поднимать стейт в реакте нельзя. Можно задать стейт выше вашего родительского компонента и спускать его ниже с помощью контекста.

Comments

[zlodiak]

Но это же какой-то ад получается)

Answer 2

[davidnum95]

Это неправильный подход

Это кто такое сказал?

Comments

[zlodiak]

Я думал, что презентационный компонент должен только получать пропсы и на основе их генерировать JSX. А манипуляции со стейтом это уже логика, которой в презентационном компоннете быть не должно.

[davidnum95]

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

[zlodiak]

davidnum95, Я правильно понимаю, что в моём случае вообще нет смысла делить код на презентационный и контейнерный компонент? Будет проще написать простыню кода в одном файле?