[Solved]-How can I turn this function into a class in which the state would be an array containing the grid items?-Reactjs

An exaple can be this, however, it's needs a bit more edit from your side:

class YourClassName extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {

  }

  componentDidUpdate() {

  }

  render() {
    const { classes } = props;

    return (
    <div className={classes.root}>
      <Grid container spacing={24}>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}><Swappable id='1' content={<DataTable/>}/></Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}> <Swappable id='2' content="#2"/></Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}><Swappable id='3' content="#3"/></Paper>
        </Grid>
        <Grid item xs={12} sm={6}>
          <Paper className={classes.paper}><Swappable id='4' content="#4"/></Paper>
        </Grid>
      </Grid>
    </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    something: state.something,
    something2: state.something2,
  };
}

const YourClassNameContainer = connect(mapStateToProps)(YourClassName);

export default YourClassNameContainer;