Question to React.js Specialist

there is a stateless component

import { connect } from 'react-redux'; import { compose, withState, withHandlers, } from 'recompose'; import PropTypes from 'prop-types'; import ColumnPresentation from './ColumnPresentation'; import { setPlayerStep, setWinner } from '../GameState'; export default compose( connect( state => ({ playerStep: state.game.playerStep, winner: state.game.winner, }), dispatch => ({ setPlayerStep: () => dispatch(setPlayerStep()), setWinner: winner => dispatch(setWinner(winner)), }), ), withState('count', 'setCount', 0), withState('arrayFiller', 'setArrayFiller', [...Array(6)]), withHandlers({ incrementCount: props => () => { props.setCount(props.count + 1); }, }), )(ColumnPresentation); 

 import React from 'react'; import Cell from '../../../components/Cell'; function columnPresentation({ arrayFiller, incrementCount, }) { return ( <div> <div onClick={incrementCount} style={{ flexDirection: 'column', display: 'inline-block' }} role="button" tabIndex={0} > <p>Hello</p> </div> </div> ); } export default columnPresentation;

How now to multiply this component:

 import React from 'react'; import ColumnPresentation from '../column/ColumnPresentationContainer'; function homePresentation() { return ( <div style={styles.container}> <ColumnPresentation /> <ColumnPresentation /> </div> ); } const styles = { container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: 'white', }, }; export default homePresentation;

What was each had its own state, independent of the others? When I click on one, the state of the second component changes.

  • Make a container - Alexander
  • Do not quite understand? So I have a view and a container? the very first block of code? - sinevik

1 answer 1

Stateless components do not have their own state — they take parameters as input and give jsx to display. They are a simple function.

If there is a need to save the state of the application, you can do the following:

  1. Create a full-fledged component and store the state in a local state — which is most convenient in this case. React-application consists of many components that store their state.
  2. To make a save state in a container or component above — usually or a container for a page. To transfer to each stateless component a variable for manipulation.
  3. Store the state in one of the state-managers: for example Redux, Mobx
  • I have a little wrong question formulated. Here we are talking specifically about the library recompose - sinevik
  • And specifically this example. I know that there is Redux, it's not about that - sinevik