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

import { TransitionGroup, CSSTransition } from "react-transition-group";

<TransitionGroup className="items-section__list">
  {list.map(elem => (
    <CSSTransition key={elem} timeout={500} classNames="move">
      <h5 key={elem}>{elem}</h5>
    </CSSTransition>
  ))}
</TransitionGroup>

.move-enter {
  opacity: 0.01;
  transform: translate(-40px, 0);
}

.move-enter-active {
  opacity: 1;
  transform: translate(0, 0);
  transition: all 500ms ease-in;
}

.move-exit {
  opacity: 1;
  transform: translate(0, 0);
}

.move-exit-active {
  opacity: 0.01;
  transform: translate(40px, 0);
  transition: all 500ms ease-in;
}

this.setState({
  data: {
    text: {
      value: {
        title: 'нужный тайтл'
      }
    }
  }
})

this.setState(prevState => ({
      data: {
        ...prevState.data,
        text: {
          ...prevState.data.text,
          value: {
            ...prevState.data.text.value,
            title: '1234'
          }
        }
      }
}))

componentDidMount(): вызывается после рендеринга компонента. Здесь можно выполнять запросы к удаленным ресурсам

componentDidMount() {
        document.addEventListener('click', this.close);
    }
    
    componentWillUnmount() {
        document.removeEventListener('click', this.close);
    }
    
    close = (event) => {
        const domNode = ReactDOM.findDOMNode(this);
        if (!domNode || !domNode.contains(event.target)) {
            this.setState({ isOpened: false });
        }
    }

${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Bold', 600, 'normal')}

import { createGlobalStyle } from 'styled-components';

export function fontFace(name, src, fontWeight = 'normal', fontStyle = 'normal'){
    /* eslint-disable */
    return `
      @font-face{
          font-family: "${name}";
          src: url(${require('../../../../fonts/' + src + '.eot')});
          src: url(${require('../../../../fonts/' + src + '.eot')}?#iefix) format("embedded-opentype"),
               url(${require('../../../../fonts/' + src + '.woff')}) format("woff"),
               url(${require('../../../../fonts/' + src + '.ttf')}) format("truetype"),
               url(${require('../../../../fonts/' + src + '.svg')}#${name}) format("svg");

          font-style: ${fontStyle};
          font-weight: ${fontWeight};
      }
  `;
}

export const GlobalStyle = createGlobalStyle`
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Thin', 100, 'normal')}
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Light', 300, 'normal')}
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Roman', 'normal', 'normal')}
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Medium', 500, 'normal')}
  ${fontFace('HelveticaNeue', 'HelveticaNeueCyr-Bold', 600, 'normal')}

  *{
    box-sizing: border-box;
  }

  a{
    color: #17b0e7;
    text-decoration: none;
  }

  body{
    font-family: 'HelveticaNeue';
  }
`;

class SomeComponent extends Component {
    static propTypes = {
        someFunction: PropTypes.func
    }
    state = {
        inputValue: transferTemplateType.none,
    }
    handleChangeTextInput = (event) => {
        this.setState({ [event.target.name]: event.target.value });
    }
    sendValue = () => {
        this.props.someFunction(this.state.inputValue);
    }

    render() {
        return (
            <div>
                <input onChange={this.handleChangeTextInput} value={this.state.inputValue} />
                <button onclick={this.sendValue}>Передать значение</button>
            </div >
        );
    }
}


const mapDispatchToProps = (dispatch) => ({
    someFunction: (inputValue) => dispatch(someFunction(inputValue))
});

export default connect(null, mapDispatchToProps)(SomeComponent);