結論:アロー関数は戻り値がObjectの時に()が必要
エラー内容
'color:' is defined but never used.eslintno-unused-labels
Unexpected labeled statement.eslintno-labels
原因
オブジェクトと認識されず、ただ文字列が評価されている
import './App.css';
const contentPinkStyle = () => {
//文字列としては評価されているが、オブジェクトと認識されていない
color: "pink",
fontSize: "20px"
};
function App() {
return (
<>
<p style={contentPinkStyle()}>しみともです</p>
</>
);
}
export default App;
解決策
{}をオブジェクトだと認識されることが必要
const contentPinkStyle = () => {
return {
color: "pink",
fontSize: "20px"
};
};
//もしくは
const contentPinkStyle = () => ({
color: "pink",
fontSize: "20px"
});
参考記事
https://jsnotice.com/posts/2019-06-06/
しかし!単純にオブジェクトを変数として定義すればよかった
const contentPinkStyle = {
color: "pink",
fontSize: "20px"
};
function App() {
return (
<>
<p style={contentPinkStyle}>しみともです</p>
</>
);
}