How to combine different input values (+react, typescript)

Question

I have three inputs. One is the input of getting html date. Second is the input that receives the first time in 24-hour format. (ex: HH:00) And the last is an input that receives mm in 24-hour format. (ex: 23:MM) For your information, the first input is getting a value called prop.editTodoAnswer.inception.

I have to combine all of these inputs into one and make the following output. "2022-12-01T00:00:00"

How can we express the value according to the format? Next is my code

 const inceptionValues = {
    date: props.editTodoAnswer.inception,
    fristTime: '00',
    secondeTime: '00',
  }
  
const [inceptionTest, setInceptionTest] = useState(inceptionValues);

 const handleChangeInception = (e: any) => {
    const newInception = e.target.value;
    setInceptionTest(newInception)
  }
  
--------------------------
  
  <form onChange={e => handleChangeInception(e)}>
      <input style={{margin:'0 5px 0 0'}} type="date" name="date" defaultValue={inceptionValues.date}/>
      <input style={{border:'none'}} type="number" name="fristTime" min="0" max="23" placeholder="23"/>:
      <input style={{border:'none'}} type="number" name="secondeTime" min="0" max="59" placeholder="00"/>
    </form>

Dont show please · Accepted Answer · 2022-02-21 03:45:33Z

1

const dateString = `${props.editTodoAnswer.inception}T${inceptionValues.firstTime.padStart(2,'0')}:${inceptionValues.secondeTime.padStart(2,'0')}:00`

and i think props.editTodoAnswer.inception may not be in inceptionValues just use props.editTodoAnswer.inception

answered Feb 21, 2022 at 3:45

Dont show please

914 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jeje Over a year ago

I don't understand. Can you explain it in more detail?

Louys Patrice Bessette · Accepted Answer · 2022-02-21 05:12:01Z

It is not clear where you want the date string to be outputted... So I assumed you wished it in in the state.

There are three cases in order to build the string, depending on which input changed. Additionally, you have to add the leading zeros.

I suggest you to apply the change handler on each inputs instead of the form. This will allow each inputs to be updated with the state value at each render allowing the leading zeros to be shown.

Have a look at the comments throughout the code.

function CustomDate() {
  // Default state values
  const inceptionValues = {
    date: "2022-02-20",
    hours: "00",
    minutes: "00",
    dateString: "2022-02-20T00:00:00"
  };

  // State hook
  const [inceptionTest, setInceptionTest] = React.useState(inceptionValues);

  // Add the leading zeros when necessary
  const leadZero = (n) => {
    return parseInt(n) < 10 ? `0${n}` : n;
  };

  // Change handler for the 3 inputs
  // so e.target can be any of the 3 inputs
  const handleChangeInception = (e) => {
    let value = e.target.value;
    let newdateString;

    // Build the date string
    if (e.target.name === "date") {
      newdateString = `${value}T${inceptionTest.hours}:${inceptionTest.minutes}:00`;
    }
    if (e.target.name === "hours") {
      value = leadZero(value);
      newdateString = `${inceptionTest.date}T${value}:${inceptionTest.minutes}:00`;
    }
    if (e.target.name === "minutes") {
      value = leadZero(value);
      newdateString = `${inceptionTest.date}T${inceptionTest.hours}:${value}:00`;
    }

    // Prepare the object to set the new state
    let newState = {
      ...inceptionTest,
      [e.target.name]: value,
      dateString: newdateString
    };
    console.log(newState);

    setInceptionTest(newState);
  };

  // Render
  return (
    <form>
      <input
        style={{ margin: "0 5px 0 0" }}
        type="date"
        name="date"
        value={inceptionTest.date}
        onChange={(e) => handleChangeInception(e)}
      />
      <input
        style={{ border: "none" }}
        type="number"
        name="hours"
        min="0"
        max="23"
        placeholder="23"
        value={inceptionTest.hours}
        onChange={(e) => handleChangeInception(e)}
      />
      :
      <input
        style={{ border: "none" }}
        type="number"
        name="minutes"
        min="0"
        max="59"
        placeholder="00"
        value={inceptionTest.minutes}
        onChange={(e) => handleChangeInception(e)}
      />
    </form>
  );
}

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <h1>Custom date</h1>
        <CustomDate />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>

<div id="root"></div>

Collectives™ on Stack Overflow

How to combine different input values (+react, typescript)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related