How to multiply the same stateless component so that each has an autonomous state. Are you talking about the recompose library?

Question

React

Question to a React.js specialist Is
there 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;

Now how to propagate 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 others? When I click on one, for some reason the state of the second component changes

Answer 1

Well, everything is logical, the state is general. It would be nice to move this code to the sandbox, but I'll still give you a hint, offhand. In my work, I wrote an independent component that I drew, some kind of tree. It was with redux and the problem arose when it became necessary to use several of these components on one page. The Store is created, in fact, when the component is imported, because it is wrapped in a Provider and, no matter how many there are, the store will be common for everyone. The solution was to add the generation of a uuid to the component's export function, which was passed to the store creation method and the data was stored by a specific uuid and taken from there.
I can help describe it, but move the code to a sandbox.