Как реализовать ссылки на пункты из списка, чтобы пункты открывались в отдельном div для редактирования CRUD React?

Question

[acorn]

Привет! есть список из наименований мероприятий, планирую сделать ,чтобы при клике на наименование мероприятия отдельно открывалось в div и можно было его редактировать.
Как реализoвать в react такую ссылку?
Создать компонент "Мероприятие ", а в компоненте Search прописать его?
Как сделать это правильней?
Спасибо!

компонент Search

function searching(filterText){
    return function(x){
        return x.name.toLowerCase().includes(filterText.toLowerCase()) || !filterText;
    }
}

class Search extends Component{
     constructor() {
         super();
         this.addEvents = this.addEvents.bind(this);
         this.searchHandler = this.searchHandler.bind(this);
         //get initial state new Event, list...
         this.state = {
             newEvents: sampleEvents,
             listEvents: {},
             filterText: ''
         }

     }
  searchHandler(event) {
        this.setState({
            filterText: event.target.value
        });
    }
render(){
      const {newEvents,filterText }=this.state ;
return(
          <div className="events-block">
            <form>
              <input
                  type="text"
                  placeholder="Search..."
                  onChange={this.searchHandler}
                  value={filterText}
              />
            </form>
            <ListEvent addEvents={this.addEvents}  />
            <ul>Name{
                newEvents.filter(searching(filterText)).map(function(newEvents){
                    return (
                        <li>{newEvents.name}</li>
                    )
                })
            }
            </ul>
          </div>
      )
    }
  }

Answer 1

[Антон Спирин]

Cмотря как хотите реализовать. Если хотите открывать на той же странице, то достаточно хандлера, ключа состояния и условия в render:

class Example extends Component {
  state = {
     eventsList,
    selectedEvent,
  };

  handleSelectEvent(event) {
     this.setState({ selectedEvent: event });
  }
  
  render() {
    const { eventsList, selectedEvent } = this.state;
                
    return (
      <Wrapper>
        {selectedEvent && <EventDetails event={selectedEvent} />}
        <ul>
          {eventsList.map(event => (
            <li
              key={event.id}
              onClick={() => this.handleSelectEvent(event)}
            >
              {event.name}
            </li>
          ))}
        </ul> 
      </Wrapper>
    );
  }
}

Если хотите на отдельной странице, то лучше использовать роутер.
В примере ниже используются компоненты BrowserRouter, Switch, Route, Link из пакета react-router-dom.
Приложение оборачиваете в BrowserRouter:

<BrowserRouter>
  <App />
</BrowserRouter>

В том месте где хотите рендерить роуты:

<Switch>
  <Route exact path="/" component={Home} />
  <Route path="/events" component={EventsList} />
  <Route path="/event/:id" component={EventDetails} />
</Switch>

В компоненте списка:

class EventsList extends Component {
  state = {
     eventsList,
  };

  render() {
    const { eventsList } = this.state;
                
    return (
      <Wrapper>
        <ul>
          {eventsList.map(event => (
            <li key={event.id}>
              <Link to={`/event/${event.id}`}>{event.name}</Link>
            </li>
          ))}
        </ul> 
      </Wrapper>
    );
  }
}

В компоненте детализации, в зависимости откуда получаете элементы реализация может отличаться,
но id элемента можно получить из параметров ссылки так:

class EventsList extends Component {
  componentDidMount() {
    const elementId = this.props.match.params.id;
  }
  render() {
    ...
  }
}

Comments

[acorn]

спасибо!