Как без перезагрузки отобразить данные при добавлении новых?

Question

[dfv123]

Новичек в React. Приложение умеет искать по вопросам ответы, добавляет новые тесты. Как сделать, чтобы при добавлении новых тестов, чтобы их увидеть не обновлять каждый раз страницу?

import React, { Component } from 'react'
import Card from '../Card'
import Form from '../Form'
import axios from 'axios'

export default class Search extends Component {
  state = {
    query: '',
    items: []
  }
  componentDidMount() {
    axios.get('/api/v1/tests')
      .then(response => response.data)
      .then(items => this.setState({ items }))
      .catch(Error => console.error(Error))
  }

  render() {
    /*let items = this.state.items.filter(item =>
      item.title.includes(this.state.query)
    )*/
    let items = this.state.items
    console.log(items)
    items = items.filter(item => item.question.toLowerCase().includes(this.state.query.toLowerCase()))

    return (
      <div>
        <input
          type="text"
          value={this.state.searchItem}
          onChange={this.handleChange}
          placeholder="Искать"
        />
        {items.map(item => (
          <Card key={item._id} {...item} />
        ))}
        <Form />
      </div>
    )
  }
  handleChange = (event) => {
    //значение которое будем искать в нижн. рег. чтобы поиск не зависел от регистра
    let query = event.target.value.toLowerCase()
    //заносим в состояние
    this.setState({ query })
  }
}

import React, {Component} from 'react'
import axios from 'axios'

class Form extends Component {
    state={
        file: ''
    }
    render(){
        return(
            <div>
                <input type="file" onChange={this.setFile} />
                <button onClick={this.upload}>Отправить</button>
            </div>
        )
    }
    setFile = (event) => {
        this.setState({file: event.target.files[0]})
    }
    upload = () => {
        if (!this.state.file) return;
        let data = new FormData();
        data.append('html', this.state.file);
        
        axios.post('/api/v1/upload', data)
        .then(response => response.data)
    }
}

export default Form

Comments

[Роман Александрович]

покажите компонент который отображает и Form и Search

[dfv123]

Роман Александрович,

Answer 1

[Роман Александрович]

https://jsfiddle.net/45u3h5gz/
но я согласен что лучше подключить редукс