попытка использовать переменную состояния для перевода строки в верхний регистр

Question

Я не понимаю, как работает этот useState из реакции. Я просто пытаюсь создать кнопку, которая обновляет заголовок с помощью .toUpperCase, но это не удается. Я не понимаю, как >> const [Title, setTitle] = useState (title) << должна быть эта строка. Я попытался посмотреть документацию, но не могу asp это понять. </p>

import React, { useState } from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    
    
    const Unit = (props) =>{  
    
      return (
        <div>
          <p>Unit code = {props.unitcode}, Title = {props.title} </p>
    
        </div>
      )
    }
    
    const App = () => {
    
      const unitcode = ['COMP1010', 'COMP1750'] 
      const title = ['Fundamentals of Computer Science','Introduction to Business Information Systems'] 
      const  [Title, setTitle] = useState(title)
      
    
      return (
        <div>
             <Unit unitcode = {unitcode[0]} title = {title[0]} />
              <button onClick={() => setTitle(title.toUpperCase)}>
                    UP
              </button>       
             <Unit unitcode = {unitcode[1]} title = {title[1]} />
             
    
        </div>
        
      )
    }
    
    ReactDOM.render(
      <React.StrictMode>
        <App />
      </React.StrictMode>,
      document.getElementById('root')
    )

Answer 1

Помимо использования скобок с toUpperCase() и вызова его в строке вместо массива, это может быть ближе к тому, что вы хотите:

const App = () => {
    const unitcode = ["COMP1010", "COMP1750"];
    const titles = [
        "Fundamentals of Computer Science",
        "Introduction to Business Information Systems"
    ];
    const [titleOne, setTitleOne] = useState(titles[0]);
    const [titleTwo, setTitleTwo] = useState(titles[1]);

    return (
        <div>
          <Unit unitcode={unitcode[0]} title={titleOne} />
          <button onClick={() => setTitleOne(titleOne.toUpperCase())}>UP</button>
          <Unit unitcode={unitcode[1]} title={titleTwo} />
        </div>
    );
};

Answer 2

Вы не можете вызвать toUpperCase() в массиве. Работает только с типом string. Кроме того, если вы wi sh вызываете toUpperCase(), вам не хватает ().