title: ToDo complete status not staying saved in storage in React Native
body: <p>Edit - added minimally reproducible example: <a href="https://snack.expo.dev/@hdorra/code" rel="nofollow noreferrer">https://snack.expo.dev/@hdorra/code</a></p>
  <p>I hope everyone can access the snack. So if you add a task, you can see it show up in the log. Click on the circle, it shows as true (meaning it is clicked). Save and refresh and everything is stored (the task) but the checkbox is not. I stripped the code to make it as bare minimum as possible but it shows the problem.</p>
  <p>It has been days of me on this error. I am relatively new to stackoverflow so my apologies if my question isn't clear or I am not asking it in the correct format. I am trying to create a to do app in react native that is using async storage. I created a toggle button that saves the toggle to a state. This button is located in a component:</p>
  <pre><code> const [checkBoxState, setCheckBoxState] = React.useState(false);
  
   const toggleComplete = () =&gt; {
  
          setCheckBoxState(!checkBoxState)
          handleEdit();
          console.log(checkBoxState)
  
      }
  </code></pre>
  <p>When the user checks on it - seems to be showing up correctly as marked true and false in the console.
  Then, this is passed to an edit handler to update the array, again console shows it is the correct state:</p>
  <pre><code>  const handleEdit = () =&gt; {
          props.editHandler(props.todoKey, text, checkBoxState);
          console.log(text2, checkBoxState)
      };
  </code></pre>
  <p>Then it shows that it saved correctly:</p>
  <pre><code> const [todos, setTodos] = React.useState([]);
   const handleEdit = (todoKey, text, newStatus) =&gt; {
          const newTodos = [...todos];
          const index = newTodos.findIndex(todos =&gt; todos.key === todoKey);
          newTodos[index] = Object.assign(newTodos[index], {title: text, status: newStatus});
          setTodos(newTodos);
      
          console.log(todos, newStatus)
      };
  </code></pre>
  <p>The async function to save to the device and load are as follows:
  To save:</p>
  <pre><code>const saveTodoToUserDevice = async (todos) =&gt; {
          try {
              const stringifyTodos = JSON.stringify(todos);
              await AsyncStorage.setItem('todos', stringifyTodos);
          } catch (error) {
              console.log(error);
          }
      };
  </code></pre>
  <p>To load from the device:</p>
  <pre><code>const getTodosFromUserDevice = async () =&gt; {
          try {
              const todos = await AsyncStorage.getItem('todos');
              if (todos != null) {
                  setTodos(JSON.parse(todos));
                  console.log(&quot;loaded successfully&quot;);
              }
          } catch (error) {
              console.log(error);
          }
      };
  </code></pre>
  <p>So here is the issue - I get the console log that says it is saved correctly and loaded. BUT, when I refresh, the checkbox state is not saved at all, just the title text (so it is saving but the checkbox would always be false (the initial state set). If I clicked on true, it would show as true and then when I refresh, it goes back to false.</p>
  <p>I have spent days and days on this and can't figure it out. Any direction would be helpful Thank you!</p>