Using React how to append to a string every time a checkbox is checked and display in another input text field

curiousCat 0
Viewed 45

I want to update a text input field every time a checkbox is checked(true). Can someone please advise how can this be done please?.

I'm trying to click a checkbox and update another input field. Every time the checkbox is checked I want to add the date to a string.

Currently, my string value is being overwritten by the new value. I want it to be a string and not an array.

const [checkboxCheckedTrue, setCheckboxStatus] = useState(false);
 const [updateMyMsg, setmyMsg] = React.useState("");

  useEffect((): void => {
    if (checkboxCheckedTrue) {
      var a = new Date();
      const myMsg = "My Date is" + a;
      
      setmyMsg(myMsg );
    }
  });

My expected string should look like the following:

"Thu Sep 15 2022 15:52:41 <br/> Thu Sep 15 2022 15:52:41 <br/> Thu Sep 15 2022 15:52:41"
string react-hooks react-native reactjs typescript
3 Answers

If you want to append a value to the updateMyMsg state any time the checkboxCheckedTrue value updates and is toggled true, use a functional state update to append to the previous state's value.

Example:

const [checkboxCheckedTrue, setCheckboxStatus] = useState<Boolean>(false);
const [myMsg, setMyMsg] = useState<string>("");

useEffect((): void => {
  if (checkboxCheckedTrue) {
    setMyMsg(myMsg => myMsg + (new Date()).toString() + "<br/>");
  }
}, [checkboxCheckedTrue]);

It might be simpler to use an array for the myMsg state and call .join when you want to use the state value.

Example:

const [checkboxCheckedTrue, setCheckboxStatus] = useState<Boolean>(false);
const [myMsg, setMyMsg] = useState<string[]>([]);

useEffect((): void => {
  if (checkboxCheckedTrue) {
    setMyMsg(myMsg => myMsg.concat((new Date()).toString()));
  }
}, [checkboxCheckedTrue]);

...

myMsg.join("<br/>")
Drew Reese0

Try this please , hope it helps :)

const [updateMyMsg, setmyMsg] = React.useState("");

  useEffect((): void => {
    if (checkboxCheckedTrue) {
      var a = new Date().toDateString();
      const myMsg = `${updateMyMsg}${a}`;
      
      setmyMsg(myMsg );
    }
  },[checkboxCheckedTrue]);
Gaurav Roy0

You can manage the message logs value while you have checked and un-check the checkbox but the value is true.

You need to manage the array of messages for every time while you need to checked the checkbox.

Something like this

Example:

import React, { useEffect, useState, Fragment } from "react";

export default function App() {
  const [isCheckboxSelected, setCheckbox] = useState(false);
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    if (isCheckboxSelected) {
      const newMessage = new Date().toString();

      setMessages((messages) => [...messages, ...[newMessage]]);
    }
  }, [isCheckboxSelected]);

  return (
    <div className="App">
      <input
        type="checkbox"
        value={isCheckboxSelected}
        onChange={() => setCheckbox((preValue) => !preValue)}
      />
      {messages?.map((message, index) => {
        return (
          <Fragment key={index}>
            <p>{message}</p>
          </Fragment>
        );
      })}
    </div>
  );
}
Asif vora0
Related