Мне нужно добавить в нарезанный массив, который я получаю из API, как я буду делать это

Question

Так что у меня возникают проблемы с добавлением к отображаемому значению, я могу вычесть из своего массива. Я знаю, что мне нужно как-то использовать длину, но я не совсем уверен, что это то, что я смог получить до сих пор.

  this.state = {
    posts: [],
    toCondosPage: false,
    Packs: []

  };
  }

  componentDidMount() {
    axios
      .get(
        `http://{Myapi}/`    
      )
      .then(res => {
        const posts = res.data.response.slice(0,3);
        this.setState({ posts });
        console.log(posts);



      });
  }

  handleAdd = () => this.setState({ posts: this.state.slice(0, this.state.posts.length + 1) })

  handleRemove = () => this.setState({ posts: this.state.posts.slice(0, -1) })
  render() {


const { posts } = this.state
    return (
<Container>
         <Header as='h1'>Featured Packages</Header>
       <Divider hidden/>
      <Grid centered>  


<Transition.Group>
        {this.state.posts.map(post => (
          <div  key={post.pack_id}>

<Grid.Column  mobile={16} tablet={12} computer={8}>

             <Card.Group size='medium' Align='center'  >
             <Popup trigger={<Card  color="teal" >
             <Link to={"/posts/" + post.pack_permalink }>

              <Image 
              src= {`(API goes HERE )${post.pack_photo}`} rounded
              label={{
                as: "a",
                color: "red",
                content: "Packages",
                ribbon: true,
                icon: "concierge-bell"
              }}
              />
              </Link>
                <Card.Content color='teal' textAlign='center' >
                <Card.Meta>
                  <Icon color='teal' name='hotel'/>
                  <Icon color='teal' name='calendar alternate'/>
                  <Icon color='teal' name='ticket alternate'/>
                  <Icon color='teal' name='map'/>
                  <Icon color='teal' name='camera retro'/>
                  </Card.Meta>

               <Card.Header>{post.pack_name}</Card.Header> 
                <Card.Description>{post.pack_short_description}</Card.Description>
                <br/>

                <Link to={"/posts/" + post.pack_permalink }><Button color='red'>More Info </Button></Link>
                <br/><br/>
                </Card.Content>
                </Card>} content="Click on me for more Info" inverted/>
              </Card.Group>






<Divider hidden/>

              </Grid.Column>

            </div>

        ))}
  </Transition.Group>

        </Grid>
        <Header as='p'>Show more</Header>
        <Button.Group>
          <Button color='red'disabled={posts.length === 0} icon='minus' onClick={this.handleRemove} />
          <Button color='green' disabled={posts.length === 0} icon='plus' onClick={this.handleAdd} />
        </Button.Group>

        </Container>

вот список массива, который я пытаюсь использовать, как я уже говорил, я могу показывать минус или показывать один меньше каждый раз, когда я нажимаю кнопку минус, но когда я нажимаю кнопку, чтобы добавить ошибку .

{
"code": 200,
"status": "OK",
"error": false,
"response": [
{
"pack_id": 1,
"pack_permalink": "allinclusive-fall-getaways",
"pack_name": "All-Inclusive Fall Getaways",
"pack_short_description": "South Padre Island vacation package including food, drinks, a dolphin watch for each person, and hotel room (up to 4 people per hotel room).",
"pack_category": "0",
"pack_feature": 0,
"pack_from": "2019-09-01T00:00:00.000Z",
"pack_to": "2019-12-31T00:00:00.000Z",
"pack_photo": "25f39a80-459b-11e9-ba7a-81151779d1a9-1.jpg",
"pack_gallery": [
"25f39a80-459b-11e9-ba7a-81151779d1a9-1.jpg",
"25f39a81-459b-11e9-ba7a-81151779d1a9-2.jpg",
"25f39a82-459b-11e9-ba7a-81151779d1a9-3.jpg",
"25f39a83-459b-11e9-ba7a-81151779d1a9-4.jpg"
],
"hotels": [
{
"id": "1",
"name": "La Copa Inn Beach Hotel",
"permalink": "la-copa-inn-beach-hotel",
"photo": "25f39a80-459b-11e9-ba7a-81151779d1a9-1.jpg"
},
{
"id": "2",
"name": "La Quinta Inn & Suites",
"permalink": "la-quinta-inn-suites",
"photo": "25f39a81-459b-11e9-ba7a-81151779d1a9-2.jpg"
},
{
"id": "3",
"name": "Hilton Garden Inn",
"permalink": "hilton-garden-inn",
"photo": "25f39a82-459b-11e9-ba7a-81151779d1a9-3.jpg"
}
],
"addOns": [
{
"name": "All-Inclusive Food",
"type": "25f39a80-459b-11e9-ba7a-81151779d1a9-1.jpg"
},
{
"name": "All-Inclusive Drinks",
"type": "25f39a81-459b-11e9-ba7a-81151779d1a9-2.jpg"
},
{
"name": "Dolphin Watch Ticket sumer",
"type": "25f39a82-459b-11e9-ba7a-81151779d1a9-3.jpg"
}
]
},

Answer 1

Я не совсем уверен, что вы пытаетесь сделать, но вам не хватает this.state.posts в handleAdd = () => this.setState({ posts: this.state.posts.slice(0, this.state.posts.length + 1) })