problem z załadowaniem strony

0

Przy komendzie npm start
wyswietla mi sie komunikat, że strona nie odpowiada i nie chce się załadować,
https://naforum.zapodaj.net/56f028c3bbc1.png.html
natomiast, gdy zmienie komponent głowny App w sensie usunę cała zawartość i wstawie zwykly znacznik

function App() {

  return (
    <>
      <Provider store={store}>
       <p>Hello</p>

      </Provider >

    </>
  );
}

to strona sie załaduje i wyswietli ten tekst
Komponent który nie chce się załadować wygląda tak:

import React from 'react';
import { Provider } from 'react-redux';
import store from './store/store'
import Form from './components/Form';

function App() {

  return (
    <>
      <Provider store={store}>
        <Form />

      </Provider >

    </>
  );
}

export default App;

Form

import React, { useState } from 'react';

const Form = ({ author = '', comment = '', rate = '', id }) => {

    const [authorInput, setAuthorInput] = useState(author);
    const [commentInput, setCommentInput] = useState(comment);
    const [rateInput, setRateInput] = useState(rate);


    const handleAuthor = event => {
        setAuthorInput(event.target.value)
    }
    const handleComment = event => {
        setCommentInput(event.target.value)
    }
    const handleRate = event => {
        setRateInput(event.target.value)
    }

    return (
        <Form>
            <div>
                <label>
                    Imie:
                    <input type="text" onchange={handleAuthor} value={authorInput} />
                </label>
            </div>
            <div>
                <label>
                    Ocena:
                    <input type="text" onchange={handleRate} value={rateInput} />
                </label>
            </div>
            <div>
                <label>
                    Komentarz:
                    <input type="text" onchange={handleComment} value={commentInput} />
                </label>
            </div>
        </Form>
    );
}

export default Form;
4

Nie wiem czy to jest rozwiązanie ale jak dla mnie masz błąd w komponencie Form. Jak dobrze rozumiem chcesz tam utworzyć formularz ale w returnie odwołujesz się do komponentu który tworzysz. Podejrzewam, że chciałeś tam użyć tagu form - pisanego z małej litery. Popraw return w komponencie Form na form i powinno działać.

1 użytkowników online, w tym zalogowanych: 0, gości: 1