Как передать useState из дочернего компонента в родительский React

Question

У меня есть код в файле index.js

import ReactDOM from "react-dom/client";
import "./styles.css";
import Input from "./UI/RadioInputs.jsx";

function App() {
  return (
    <div>
      <Input />
      <h1 className={textColor}>Hello CodeSandbox</h1>
    </div>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

И код в файле RadioInputs.jsx

import { useState } from "react";
import "../styles.css";

const Input = () => {
  const [textColor, setTextColor] = useState("text");
  return (
    <div>
      <div>
        <input
          type="radio"
          name="setTextColor"
          onClick={() => setTextColor("text")}
          id="setAutoTextColor"
        />
        <label htmlFor="setAutoTextColor">Auto</label>
      </div>
      <div>
        <input
          type="radio"
          name="setTextColor"
          onClick={() => setTextColor("text red")}
          id="setRedTextColor"
        />
        <label htmlFor="setRedTextColor">Red</label>
      </div>
      <div>
        <input
          type="radio"
          name="setTextColor"
          onClick={() => setTextColor("text green")}
          id="setGreenTextColor"
        />
        <label htmlFor="setGreenTextColor">Green</label>
      </div>
      <div>
        <input
          type="radio"
          name="setTextColor"
          onClick={() => setTextColor("text blue")}
          id="setBlueTextColor"
        />
        <label htmlFor="setBlueTextColor">Blue</label>
      </div>
    </div>
  );
};

export default Input;

Проблема заключается в том, что компонент не видит textColor. Уже по всем просторам интернета переискал всё, но ничего конкретного не нашёл. Находил информацию про то, что можно передавать состояния из дочернего копонента в родительский, но там был пример с event и onChange, а в моём случае это не подхо Я новичок в React, поэтому извините за тупость. Я понимаю, что ошибка очень глупая, но я пока не знаю на неё ответ...

Answer 1

Вот некая иллюстрация, ранее мной описанного...

const Input = ({action}) => {
  const arr = ['', 'Red', 'Green', 'Blue']
  return (
    <div>
      {arr.map(s => {
        const id = "Color" + s
        return (
          <div key={'k' + s}>
            <input
              type="radio"
              name="setTextColor"
              onClick={() => action("text" + s.toLowerCase())}
              id={id}
            />
            <label htmlFor={id}>{s ? s : 'Auto'}</label>
          </div>
        )
      })}
    </div>
  );
};


function App() {
  const [textColor, setTextColor] = React.useState("text");
  return (
    <div>
      <Input action={setTextColor} />
      <h1 className={textColor}>Hello CodeSandbox ({textColor})</h1>
    </div>
  );
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

<div id="like_button_container"></div>

БЛОГ НА HUSL

Как передать useState из дочернего компонента в родительский React

Ответы (1 шт):