0

I have a stateless component using the recompose library The file is a container: 

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),
  withHandlers({
    incrementCount: props => () => {
      props.setCount(props.count + 1);
    },
  }),
)(ColumnPresentation);

This file represents a view

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;

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;

How to multiply one stateless component so that each component of the list has an independent state? I have, when I click on one of the components, the state change in the second. How to clone this component, so that the clones have an independent state

sinevitch
  • 13
  • 3
  • It looks like you are using the redux state which is only one for all of the components rendered, you will either have to use component state or make an array of states in your redux store, one for each rendered component. – Dragomir Kolev Sep 16 '18 at 11:35
  • withState ('count', 'setCount', 0), does not apply to redux – sinevitch Sep 16 '18 at 11:47

0 Answers0