Блог

Я работаю с двумя файлами App.js который отображает компоненты и Search.js который содержит компонент строки поиска. В App.js похоже на:

 import React, { useState } from 'react';
import './App.css';
import Greeting from '../Greeting/Greeting';
import InputWithLabel from '../Search/Search';
import List from '../List/List';

// App component
const App = () => {
  return (
    <div className="App">
      <InputWithLabel
        id="search"
        value={searchTerm}
        isFocused
        onInputChange={handleSearch}
      >
        <strong>Search:</strong>
      </InputWithLabel>
      <hr />
      <List list={searchedStories} />
    </div>
  );
}

export default App;
 

В Search.js компонент выглядит так:

 import React, { useState } from 'react';

// Search bar, destructure props search, onSearch
function InputWithLabel({ id, value, type = "text", onInputChange, isFocused, children, }) {
    const stories = [
        {
            title: 'React',
            url: 'https://reactjs.org/',
            author: 'Jordan Walke',
            num_comments: 3,
            points: 4,
            objectID: 0,
        },
        {
            title: 'Redux',
            url: 'https://redux.js.org/',
            author: 'Dan Abramov, Andrew Clark',
            num_comments: 2,
            points: 5,
            objectID: 1,
        },
    ];

    const useSemiPersistentState = (key, initialState) => {
        const [value, setValue] = React.useState(
            localStorage.getItem(key) || initialState
        );

        React.useEffect(() => {
            localStorage.setItem(key, value);
        }, [value, key]);

        return [value, setValue]
    };

    // Set state on searchTerm, setSearchTerm with custom hook
    const [searchTerm, setSearchTerm] = useSemiPersistentState(
        'search',
        'React'
    );

    // Get the value of search input
    const handleSearch = (event) => {
        setSearchTerm(event.target.value);
    };

    // Check if user input matches stories array
    // toLowerCase() both values
    const searchedStories = stories.filter((story) => story.title.toLowerCase().includes(searchTerm.toLowerCase())
    );

    const inputRef = React.useRef();

    React.useEffect(() => {
        if (isFocused amp;amp; inputRef.current) {
            inputRef.current.focus();
        }
    }, [isFocused]);

    return (
        <>
            <label htmlFor={id}>{children}</label>
            amp;nbsp;
            <input
                ref={inputRef}
                id={id}
                type={type}
                value={value}
                autoFocus={isFocused}
                onChange={onInputChange}
            />
        </>
    )
}

export default InputWithLabel;
 

Ошибки, которые я получаю, являются:
Не удалось скомпилировать
src/Components/App/App.js
Строка 62:16: «Поисковый запрос» не определен нет-
не определен Строка 64:24: «Поиск по запросу» не определен нет-
не определен Строка 69:19: «Истории поиска» не определены нет-не определен

Найдите ключевые слова, чтобы узнать больше о каждой ошибке.

Я, должно быть, передаю {Поисковый запрос}, {поисковые запросы}, {Истории поиска} неверно, но не знаю, насколько это неправильно?

onChange={onInputChange} должно быть onChange={handleSearch} , и вы можете удалить реквизиты для вашего компонента

   <InputWithLabel
        id="search"        
        isFocused   
      >
 

так как вы ими не пользуетесь.
Ваш app компонент должен нести ответственность за проведение

  const stories = [
 

массив, затем вы сможете использовать searchedStories его в приложении.

Но я предлагаю вам прочитать документы React немного ближе.