ふかしぎのReactさんぷるず

Reactエラー対処(うっかりミス) - Reactさんぷるず

よもやこんなうっかりミスをする奴はおるまいな、というレベルのケアレスミスです。

うっかりミス (ケアレスミス)

変数と関数

下の二つ同じような感じですが全く違います。
かたや変数(リテラル)、もう一方は関数(コンポーネント)です。
const TukuttaDiv1 = <div>作ったDiv1</div>;
const TukuttaDiv2 = () => <div>作ったDiv2</div>;
なのでもしTukuttaDiv1を
<TukuttaDiv1 />
なんて出力しようとしたら怒られます。
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: <div />. Did you accidentally export a JSX literal instead of a component?
文字列(リテラル)をコンポーネントと間違えてるんじゃないのぉー?です。
文字列を出力するのは中括弧です。
const TukuttaDiv1 = <div>作ったDiv1</div>;
const TukuttaDiv2 = () => <div>作ったDiv2</div>;
ReactDOM.render(
<div>
{TukuttaDiv1}
<TukuttaDiv2 />
</div>
, document.getElementById('sample')
);

Selectのoptionでエラーになる

SelectのoptionでエラーがでたMUIを使っていたためoptionではなくMenuItemにしなければいけなかった

Routeで中身が表示されない

入れ子の場合はOutletで表示する必要がある

React 目次

最初に現在のReactについて
世界一シンプルなサンプル
React Router v6
React Router v6 API
MUI v5
sxの解説
マテリアルアイコンの解説
Autocomplete
Avatar
AvatarGroup
Badge
Button
ButtonGroup
Checkbox
Chip
Collapse
Divider
Floating Action Button(Fab)
Fade
FormControlLabel
Grow
Icon
List
ListItem
ListItemAvatar
ListItemButton
ListItemIcon
ListItemSecondaryAction
ListItemText
ListSubheader
Radio
RadioGroup
Rating
Select
Slide
Slider
Switch
TextField
ToggleButton
ToggleButtonGroup
Zoom
エラー対処
HTMl select
戻る

全体目次