Zenn
Open19

React ノート

React
newwingbirdnewwingbird
<Switch>
  <Route path="/event/1" component={Dashboard} />
  <Route path="/event/:event_slug" component={EventDetail} />
</Switch>

<Route>を<Switch>の中に列挙することで、どれか一つだけが実行されます。上から順番に比較され最初にマッチした物が実行されるようです。逆にグローバルナビなど同時に実行したい物である場合は<Switch>の外に出しておく必要があります。

₍参考₎[https://blog.katsubemakito.net/react/react1st-24-router2]

newwingbirdnewwingbird

【JS】packages.jsonのprivate:true

npm は　ライブラリ管理とライブラリ公開　の２機能アリ　後者をオフにする

newwingbirdnewwingbird

更新関数　遅れて値が変更される問題

なぜセットした値が更新されていないのか？
理由：setStateで値が更新されるのは関数が呼び出された後だから

newwingbirdnewwingbird

##filter array メソッド

import React, { useState } from 'react'
import Menu from './Menu'
import Categories from './Categories'
import items from './data'

// dynamically calculate unqiue values here
const categories = []

function App() {
	const [menuItems, setMenuItems] = useState(items)

	const filterItems = (category) => {
		if (category === 'all') {
			setMenuItems(items)
		} else {
			setMenuItems(items.filter((item) => item.category === category))
		}
	}

	return (
		<main>
			<section className="menu section">
				<div className="title">
					<h2>our menu</h2>
					<div className="underline"></div>
				</div>
				<Categories categories={categories} filterItems={filterItems} />
				<Menu items={menuItems} />
			</section>
		</main>
	)
}

export default App
newwingbirdnewwingbird
const questions = [
		{
			questionText: 'What is the capital of France?',
			answerOptions: [
				{ answerText: 'New York', isCorrect: false },
				{ answerText: 'London', isCorrect: false },
				{ answerText: 'Paris', isCorrect: true },
				{ answerText: 'Dublin', isCorrect: false },
			],
		},
		{
			questionText: 'Who is CEO of Tesla?',
			answerOptions: [
				{ answerText: 'Jeff Bezos', isCorrect: false },
				{ answerText: 'Elon Musk', isCorrect: true },
				{ answerText: 'Bill Gates', isCorrect: false },
				{ answerText: 'Tony Stark', isCorrect: false },
			],
		},

上記のjsonに対して

			<div className="question-text">
				{questions[0].questionText}
			</div>


// 	'What is the capital of France?',
newwingbirdnewwingbird

map の練習

正しい
    <div className="answer-section">
      {questions[0].answerOptions.map((answer) => {
        // Add onClick listener to this button
        return (
          <button key={answer.answerText}>
            {answer.answerText}
          </button>
        )
      })}
    </div>


誤り

    <div className="answer-section">
              {questions.map((q)=>{
                  return(
                  <button key={q[0].answerOptions.answerText}>
                    {q[0].answerOptions.answerText} 
                  </button>
                  )
                  })}
    </div>
					</div>
newwingbirdnewwingbird

Adding question index state variable

import React, {useState} from 'react'

	// Define function body to increment the question index variable
	function handleAnswerClick() {
        setCurrentIndex(currentIndex +1);
        console.log(currentIndex)
    }

	// Define a state variable here to track question status
const [currentIndex, setCurrentIndex] = useState(0)

	return (
		<div className="app">
			{false ? (
				<div className="score-section">
					You scored 1 out of {questions.length}
				</div>
			) : (
				<>
					<div className="question-section">
						<div className="question-count">
							<span>Question 1</span>/{questions.length}
						</div>
						{/* You should change the "0" here to a state variable */}
						<div className="question-text">
							{questions[currentIndex].questionText}
						</div>
					</div>
					{/* You should change the "0" here to a state variable */}
					<div className="answer-section">
						{questions[currentIndex].answerOptions.map((answer) => {
							// Add onClick listener to this button
							return (
								<button key={answer.answerText} onClick={handleAnswerClick}>
									{answer.answerText}
								</button>
							)
						})}
					</div>
				</>
			)}
		</div>
	)
}
newwingbirdnewwingbird

#Uncaught TypeError: Cannot read properties of undefined (reading 'map')

// valid.map((v)  
(valid || []).map((v) => {
     console.log(v);
     if (v.type == "length") {
       let check = length(e.target.value, v.min, v.max);
       status = check.valid;
       errormesse += check.message;
     }
newwingbirdnewwingbird

クリーンアップを必要としない副作用

時に、React が DOM を更新した後で追加のコードを実行したいという場合があります。ネットワークリクエストの送信、手動での DOM 改変、ログの記録、といったものがクリーンアップを必要としない副作用の例です。なぜかというとそれらのコードが実行されたあとすぐにそのことを忘れても構わないからです。クラスとフックとでそのような副作用をどのように表現するのか比較してみましょう。

https://ja.reactjs.org/docs/hooks-effect.html

newwingbirdnewwingbird

MUI: A component is changing the default value state of an uncontrolled Textfield after being initialized. To suppress this warning opt to use a controlled　Textfield

newwingbirdnewwingbird
is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>
newwingbirdnewwingbird

Route コンポーネントでレンダリングするやり方３通り

const Hoge = props => {
  const { match, location, history } = props;
  ...
}

<Route path="/hoge" component={Hoge} />;
<Route path="/hoge" render={routeProps => <Hoge {...routeProps} />} />;
<Route path="/hoge" children={routeProps => <Hoge {...routeProps} />} />;

    <Switch>
      {routes.map((prop, key) => {
        if (prop.layout === "/admin") {
          if (prop.path === "/dashboard") {
            return (
              <Route
                path={prop.layout + prop.path}
                // Dashboard コンポに直にdataを流したかったので以下でPropsとしてdataを渡してる
                render={(props) => <Dashboard data={data} {...props} />}
                key={key}
              ></Route>
            );
          } else {
            return (
              <Route
                path={prop.layout + prop.path}
                component={prop.component}
                key={key}
              ></Route>
            );
          }
        }
        return null;
      })}
      <Redirect from="/admin" to="/admin/dashboard" />
    </Switch>
  );