title: React Native Calendars : How to change the background of only one item in an agenda?
body: <p>I'm trying to change the background of only one item in this agenda but with my code, when I click on an item, it changes the background color of all of them and not just the one I clicked : <a href="https://i.stack.imgur.com/kjHs5.png" rel="nofollow noreferrer">screen before clicking on item</a> <a href="https://i.stack.imgur.com/F9ZtG.png" rel="nofollow noreferrer">screen after clicking</a></p>
  <p>The problem amounts to knowing just how to change the style of just one item in the agenda and not the style of all of them.</p>
  <p>Here is my code :</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { useState } from 'react';
  import {
      StyleSheet,
      Text,
      View,
      TouchableOpacity,
  } from 'react-native';
  import moment from 'moment';
  import { Avatar, Card } from 'react-native-paper';
  import {Agenda} from "react-native-calendars";
  
  const timeToString = (time) =&gt; {
      const date = new Date(time);
      return date.toISOString().split('T')[0];
  };
  
  
  export default function calendarScreen () {
  
  
      const [color, setColor] = useState(
          {backgroundColor: 'white', backgroundColor2: 'white', texte: 'Disponible', pressed: false}
      );
  
      const changeColor = () =&gt; {
          if (!color.pressed) {
              setColor({backgroundColor: 'lightgreen', backgroundColor2: 'white', texte: 'Réservé', pressed: true})
          } else {
              setColor({backgroundColor: 'white', backgroundColor2: 'green', texte: 'Disponible', pressed: false})
          }
  
      };
  
      const [items, setItems] = useState({});
  
      const loadItems = (day) =&gt; {
          setTimeout(() =&gt; {
              for (let i = -15; i &lt; 85; i++) {
                  const time = day.timestamp + i * 24 * 60 * 60 * 1000;
                  const strTime = timeToString(time);
  
                  if (!items[strTime]) {
                     items[strTime] = [];
                      const numItems = 1;
                      for (let j = 0; j &lt; numItems; j++) {
                          items[strTime].push({
                              name: 'Disponible',
                              height: Math.max(50, Math.floor(Math.random() * 150)),
                              style: color.backgroundColor
                          });
                      }
                  }
              }
              const newItems = {};
              Object.keys(items).forEach(key =&gt; {newItems[key] = items[key];});
              setItems(newItems);
          }, 1000);
      };
  
  
      
      const renderItem = (item, firstItemInDay) =&gt; {
          return (
              &lt;TouchableOpacity style={{ marginTop: 17, marginRight: 10}} onPress={(changeColor)}&gt;
                  &lt;Card style={ { backgroundColor : color.backgroundColor }}&gt;
                      &lt;Card.Content&gt;
                          &lt;View style={{
                              flexDirection: 'row',
                              justifyContent: 'space-between',
                              alignItems: 'center',
                          }}&gt;
                              &lt;Text&gt;{item.name}&lt;/Text&gt;
                              &lt;Avatar.Text label="J" /&gt;
                          &lt;/View&gt;
                      &lt;/Card.Content&gt;
                  &lt;/Card&gt;
              &lt;/TouchableOpacity&gt;
          )
      };
      return (
          &lt;View style={{flex:1}}&gt;
              &lt;Agenda
                  items={items}
                  loadItemsForMonth={loadItems}
                  selected={'2020-09-23'}
                  renderItem={renderItem}
                  /&gt;
          &lt;/View&gt;
      )
  }</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks a lot in advance for your help</p>