Ответы пользователя по тегу JavaScript
  • Как вывести контекст нажатого компонента React?

    @juicyigor
    const locations = [
      {
        city: "New York"
      },
      {
        city: "Moscow"
      }
    ];
    
    const First = props => 
      <div className="first">
        <button onClick={props.handleClick}>
          click
        </button>
        <p>{props.city}</p>
      </div>;
    
    const Second = props => 
      <div className="second">
        <span>
          {props.city && props.city}
        </span>
      </div>;
    
    class TestComponent extends React.Component {
      constructor() {
        super();
        this.state = {
          selectedCity: false,
        };
      }
      
      handleClick = city => () => {
        this.setState({
          selectedCity: city,
        });
      };
      
      render() {
        return (
          <div>
            {locations.map((data, i) => 
              <First 
                city={data.city} 
                handleClick={this.handleClick(data.city)} 
              />
            )}
            <Second city={this.state.selectedCity} />
          </div>
        );
      }
    }
    
    ReactDOM.render(
    <TestComponent />, 
    document.querySelector('[data-role-id="content"]'));


    Здесь есть небольшой недочет в том, что this.handleClick при перерисовке пересоздается, но думаю для вас это не очень критично
    Ответ написан
    Комментировать