How i can replace states ( arrays ) ReactJs

Question

today I offer you a new challenge

my problem and the next

in the following code

I map objects in my database

I also map a list of items

and so basically I would like to pass my database and not the Items table basically I want to do exactly the same thing as in the following code except that instead of using the items array, I would like to be able to use the data array which contains my database

do you have any idea how to do this?

I hope I was precise thanks to you for the help Neff

ps: Sorry for the length of the code i try to do my best to clean a little

 import React, { Component } from 'react';
 import { CardText, Card,Row, Col, Button } from 'reactstrap';
 import axios from 'axios'
 import GridLayout from 'react-grid-layout';
 import SmsForm from './Sms/SMSForm'
 import FruitList from './FruitList'
 import './AdminPage.scss'

 const UP = -1;
 const DOWN = 1;

 const entrypoint = process.env.REACT_APP_API_ENTRYPOINT+'/api';

 class AdminPage  extends Component {


constructor(props) {
    super(props);
    this.state = {
      items: [
        { id: 1, name: "orange", bgColor: "#f9cb9c" },
        { id: 2, name: "lemon", bgColor: "#fee599" },
        { id: 3, name: "strawberry", bgColor: "#e06666" }
      ],
        data: [],  
}
handleMove = (id, direction) => {
  const { items } = this.state;

  const position = items.findIndex(i => i.id === id);
  if (position < 0) {
    throw new Error("Given item not found.");
  } else if (
    (direction === UP && position === 0) ||
    (direction === DOWN && position === items.length - 1)
  ) {
    return; // canot move outside of array
  }

  const item = items[position]; // save item for later
  const newItems = items.filter(i => i.id !== id); // remove item from array
  newItems.splice(position + direction, 0, item);

  this.setState({ items: newItems });
};
 // rest of the component
  onHandleChange(event) {
     const name = event.target.getAttribute('name');
    this.setState({
      message: { ...this.state.message, [name]: event.target.value }
    });
  }
getRandom = async () => {

    const res = await axios.get(
        entrypoint + "/alluserpls"
    )
    this.setState({ data: res.data })
}
componentDidMount() {
    this.getRandom()
}
render() {
    let datas = this.state.data.map(datass => {
      const status = JSON.parse(localStorage.getItem("validated-order") || "{}")[datass.id];
      return (
          <div>
              < Col sm="12" key={datass.id} className="wtfFuHereIsForOnlyBackGroundColorForCol12Nice">
              <FruitList fruitList={this.state.items} onMove={this.handleMove} />
                  <GridLayout className="GridlayoutTextOnlyForGridOuiAndHeigthbecauseHeigthWasBug" layout={layout} cols={12} rowHeight={30} width={1200}>
                      <div key="a">
                      <Card body className="yoloCardBodyForbackGroundAndRaduisBorderForAdminPageWtf">
                      <CardText className="cardTextForAdminPageForDataName"> Commande de {datass.name}</CardText>

                          </Card>
                      </div>
              </ Col>
          </div>
      )
  })
    return (
        <div> <div>

    <Row  className="wtfHereIsAgainOnlyForRowAndMarginForAdminPageJustWtf">
    <div className="isJustForOnlyPaddingOnRowForAdminPage" >
    <div className="navBarGridMenuAdminPage">  
    <div className="thatIsOnlyForSpaceArroundOnDivAdminPage">
    <CardText className="maybeColForAdminPageOuiOui">  Nouvelles commandes  </CardText>

    </div>
    </div>
    <div> 
    {datas}
  </div>
    </div>
  </Row> 
    </div>
            <div className="box">       
            </div>
        </div>


    )
}
 }


 export default AdminPage 

here my second components

  import React from "react";
  const LEFT = -1;
  const RIGHT = 1;

  class FruitList extends React.Component {
    render() {
    const { fruitList, onMove } = this.props;

     return (
      <div style={{ display: "flex" }}>
    {fruitList.map(item => (
      <div
        key={item.id}
        style={{
          backgroundColor: item.bgColor,
          display: "flex"
        }}
      >
        <div className="fruitsArrows">
          <a onClick={() => onMove(item.id, LEFT)}>&#8592;</a>
        </div>
        <div className="fruitsId">{item.id}</div>
        <div className="fruitsName">{item.name}</div>
        <div className="fruitsArrows">
          <a onClick={() => onMove(item.id, RIGHT)}>&#8594;</a>
        </div>
      </div>
    ))}
  </div>
);
 }
}

export default FruitList;

Answer 1

To delete particular list do like this-

pass your item(object).

<a onClick={() => onMove(item)}>&#8594;</a>

handleMove function

handleMove = (row) => {
  let filtered = this.state.items.filter(item=>item.id!==row.id);
  this.setState({ items: filtered});
};