Reactでstyled-componentsが上手くいかない

Question

すでに関数が宣言されているとエラーが出てしまう

Reactを学習し始めたばかりです。Todoリストのデモも作成しています。★で囲んであるコードを書かなければ正常に画面にcssが反映されるのですが、★で囲まれた部分（Formタグの中のformタグに反映させたいcss）を記載した途端

Failed to compile
./src/App.js
Line 22:7: Parsing error: Identifier 'Form' has already been declared
20 | font-size: 3rem;
21 | `

22 | const Form = styled.form`

 |       ^

23 | text-align: center;
24 | `
25 |

というエラー出てしまいます。

記載する部分が違うのか、そもそも記載の仕方が違うのでしょうか。(Form.jsのコンポーネントに書くのか)
コードの書き間違いはないと思うのですが...初歩的な質問ですいません。
お時間のある方、宜しくお願いします。

index.js

import ReactDOM from 'react-dom'
import App from './App'

ReactDOM.render(
  <App />,
  document.getElementById('root')
)
コード

App.js

import Form from './Form'
import List from './List'

import styled from 'styled-components'

const App = () => {
  return (
    <>
      <Title>Todo App</Title>
      <Form></Form>
      <List></List>
    </>
  )
}

const Title = styled.h1`
  text-align: center;
  color: #ff7a84;
  font-size: 3rem;
`
★
const Form = styled.form`
text-align: center;
`
★

export default App
コード

Form.js

const Form = () => {
  return (
    <form>
      <input type="text" />
    </form>
  )
}

export default Form
コード

Answer 1

こんにちは

順番としては、以下になります。

(1) styled でスタイルをあてた form のコンポーネントを、（Form ではない名前で）作る。

(2) 上記のスタイルをあてたコンポーネントを import して、これを <form> の替わりに使って、Formを作る。

以下は、上記のサンプルです。

• 動作確認用codesandbox: https://codesandbox.io/s/q257307-czhh6

このサンプルでは、styled でスタイルをあてたコンポーネントを １つのファイルstyles.js にまとめており、上記(1) の、styled でスタイルをあてた form のコンポーネントを、MyFormという名前で作っておき、Form はこの MyFormをimport して作っています。また、formにスタイルが効いていることが分かりやすいように、formにあてるスタイルを追加しています。

参考になれば幸いです。

Comments

[pikari]

記載通り実装してみた所、解決致しました！
動作確認までつけて頂きわかりやすかったです！
ありがとうございます！

[jun68ykt]

どういたしまして????
> 解決致しました！
とのことで、よかったです????

Answer 2

私もつい最近Reactに触れたばかりなのでお力になれるかどうかわかりませんし、石をぶつけられても辛いのですが…。

'Form' has already been declaredって**'Form'ってやつはもう宣言されてるで、再宣言すんなや！**ってことですよね？
constって定数ですから、再代入や再宣言はできないのに、import Form from './Form'とconst Form = styled.formで宣言が2回されてて怒られてるという話ではないのでしょうか…。
2回めのFormの名称を変更してみたりしたら通りませんかね？？

…初学者なので、的はずれなことを申し上げていたらすいません。
お力になれていれば幸いです。

……あっ、やめてください、石をぶつけられては…

Comments

[pikari]

コメントありがとうございます！

[pikari]

自分も、関数名の変更をやってみましたが上手くいきませんでした。

[take77]

jun68yktさんのコード、読ませていただきました。
スタイルの当て方も気をつけなくてはいけませんね。
私も勉強になりました。質問を出してくださってありがとうございます。