Как вывести значение переменной из js в div?

уже додумался сам, понял ошибку глупую, спасибо!

CSS подключение шрифта - font-weight: Extrabold - не работает, а вот font-weight: 800 - работает. Почему так?

sorry_i_noob, heavy тоже нет

Как передать props через Link в react-router?

DarthJS у вас в 1. пункте ничего нет . Redux не используется

Как передать props через Link в react-router?

Павел Антонов, в комментариях так же поместил код страницы результата , вот код роутера :

ReactDOM.render(
    <BrowserRouter>
        <Switch>
        <Route exact path="/" component={App}/>
        <Route path="/search" component={SearchTable}/>
        </Switch>
    </BrowserRouter>
, document.getElementById('root'));

Как передать props через Link в react-router?

Павел Антонов, 4.2

Как передать props через Link в react-router?

davidnum95, Павел Антонов ,

class InputResult extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          items: [],
          searchValue: '',
        };
      }

    componentDidMount(){
        fetch("http://localhost:8080/api/users?offset=0&count=15")
        .then(res => res.json())
        .then(
          (result) => {
            this.setState({
              isLoaded: true,
              items: result.items
            }
          );
          },
          (error) => {
            this.setState({
              isLoaded: true,
              error
            });
          }
        )
        .catch(error => console.log('parsing failed', error)); 
    }

    onSearchChange = (event, searchValue) => {
      this.setState({ searchValue });
    };

    onSearchClick = () => {
      const { searchValue } = this.state;
      fetch("http://localhost:8080/api/users/?name="+searchValue)
    .then(res => res.json())
    .then(
      (result) => {
        this.setState({
          isLoaded: true,
          items: result.items
        }
      );
      },
      (error) => {
        this.setState({
          isLoaded: true,
          error
        });
      }
    )
    .catch(error => console.log('parsing failed', error));
}
    onSearchPress = (e) => {
        if (e.key === 'Enter'){
        this.onSearchClick();
    }
  }
    render() {
        const { items, error , isLoaded, searchValue} = this.state;
        console.log(searchValue);
        return (
            <div>
            <div className={styles.parentResult}>
              <Center>
                <div className={styles.input}>
                    <Input leftIcon={<Icon name="search" />}
                        value={this.state.searchValue}
                        width="700px"
                        placeholder="Введите Фамилию и Имя"
                        onChange={this.onSearchChange}
                        onKeyPress={this.onSearchPress}
                    /> {' '}
                    <Button use="primary" onClick={this.onSearchClick}>Найти</Button>
                </div>
              </Center>
            </div>
                <SearchHub error={error} isLoaded={isLoaded} items={items} searchValue={searchValue}/>
            </div>


        )
    }
}

export default InputResult;

Как передать props через Link в react-router?

при указании :searchValue
у меня в принципе страница не открывается , она полностью пустая

Как сохранить последнее значение в props?

Антон Спирин, Извините что опять беспокою, на чем в итоге я остановился :

onSearchChange = (event, searchInputValue) => {
      this.setState({ searchInputValue });
    };

    onSearchClick = () => {
      this.setState(prevState => ({
        searchValue: prevState.searchInputValue,
      }), this.onSearchClick);
    };
    
    onSearchClick = () => {
        const { searchInputValue } = this.state;
        fetch("http://localhost:8080/api/users/?name="+searchInputValue)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          }
        );
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
      .catch(error => console.log('parsing failed', error));
  }
    render() {
        const { items, error , isLoaded, searchValue} = this.state;
        console.log(searchValue);
        return (
            <div>
                <div className={styles.input}>
                    <Input leftIcon={<Icon name="search" />}
                        value={this.state.searchInputValue}
                        width="700px"
                        placeholder="Введите Фамилию и Имя"
                        onChange={this.onSearchChange}
                    /> {' '}
                    <Button use="primary" onClick={this.onSearchClick}>Найти</Button>
                </div>
            </div>
                <SearchHub error={error} isLoaded={isLoaded} items={items} searchValue={searchValue}/>
            </div>


        )
    }
}

Сделал так , поиск идет и все хорошо, но если я ввожу значение которого нет в json , то у меня ничего не происходит, даже текст ошибки не появляется, если быть точнее то в console я вывожу inputResult и там пустое значение. В консоле пустая строка.

Как стилизовать форму?

Согласен , лучше воспользуйтесь bootstrap-ом

Как сделать стрелку для перехода к следующему li?

michail0011, Аго, у вас так называемый accordion slider, тут есть готовый пример :
Можете нажать здесь! , либо загуглите , их полно)

Как расположить две блоки горизонтально?

Ilshat Gayanov, Рад помочь:)

Почему React приложение замирает (теряет связь с апи) через какое-то время?

frostspb, хм, у меня тоже есть запрос , который работает корректно и так же через fetch . Без каких либо проблем все получает и отдает , при обновлении не ломается.
Возможно что это из за Django я с ним не работал, зачем он вам? только для запроса? Если да, то воспользуйтесь обычным fetch без него , кек

Как сохранить последнее значение в props?

Антон Спирин, Аго, новичек еще , не совсем понял :)

Как расположить две блоки горизонтально?

Ilshat Gayanov, вот пример

Как сохранить последнее значение в props?

Антон Спирин, начал внедрять ваш код , увы, но у меня ошибка :
Что самое интересное , ваш код я ставлю после когда который указал выше в пример на error . Если я его ставлю перед , то ошибки никакой нет , но в месте где должен появится текст ошибки на лендинге , там пусто

Как определять state компонента?

WarriorKodeK, вам нужно чтобы при вводе значений в input и нажатию на кнопку данные попадали в таск? Логику не понимаю вашего SPA

Как сделать текст за текстом?

mindx, касаемо кода все ок, мне нравится. Единственное что могу еще посоветовать это css validator : Тык.
а если все таки охото все красиво под все виды экранов : Bootstrap хорошее решение .

Как сохранить последнее значение в props?

Антон Спирин, там пишу ошибку, которая ловится на fetch :

onSearchClick = () => {
        const { searchValue } = this.state;
        fetch("http://localhost:8080/api/users/?name="+searchValue)
      .then(res => res.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            items: result.items
          }
        );
        },
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
      .catch(error => console.log('parsing failed', error));

Как сохранить последнее значение в props?

@rocknon404 Хотел бы уточнить по разделению .не совсем понял, подскажите, вот код :
Компонент с input :

constructor(props) {
        super(props);
        this.state = {
          error: null,
          isLoaded: false,
          items: [],
          searchValue: ''
        };
      }
onSearchChange = (event, searchValue) => {
        this.setState({ searchValue })
    }
render() {
        const { items, error , isLoaded, searchValue } = this.state;
        return (
            <div>
                <div className={styles.input}>
                    <Input leftIcon={<Icon name="search" />}
                        value={this.state.searchValue}
                        width="700px"
                        placeholder="Введите Фамилию и Имя"
                        onChange={this.onSearchChange}
                    /> {' '}
                    <Button use="primary" onClick={this.onSearchClick}>Найти</Button>
                </div>
            </div>
            <div>
                <SearchHub error={error} isLoaded={isLoaded} items={items} searchValue={searchValue}/>
            </div>


        )
    }
}

Как сохранить последнее значение в props?

Антон Спирин Я понял, спасибо. Примерно так и догадывался:)