mardi 24 novembre 2020

how display text only inside the related input field?

I have input boxes which are getting enabled when the checkbox of that input box get checked by user. then I want to type in that particular input box, but when I am in a particular input box then my text is showing in the all the input.

import React, { useState } from "react";
//some imports related to checkbox

export default function Rename() {
  //input
  const [value, setValue] = useState("");
 

  //checkbox group
  const [checkedOptions, setCheckedOptions] = useState({});

  const onOSelect = (event) => {
  
    const item = event.target.name;
    const isChecked = event.target.checked;
   

    setCheckedOptions({
      ...checkedOptions,
      [item]: isChecked,
    });
  };

  //data
  const data = [
    { label: "Email", name: "email" },
    { label: "Phone", name: "phone" },
    { label: "Mail", name: "mail" },
    { label: "test", name: "test" },
  ];

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return (
    <div className="rename-tab-container">
      <div className="checkbox-wrapper">
        <MediaCard className="checkbox-card">
          <CheckboxGroup
            checkedOptions={checkedOptions}
            groupLabel="Checkbox group label"
            onChange={onOSelect}
            options={data}
          />
        </MediaCard>
      </div>
      <MediaCard className="input-card">
        <div className="input-container">
          {data.map((item, key) => (
            <div key={key.name} className="rename-wrapper">
              <Input
                isRequired
                label={item.name}
                minLength={4}
                name={item.name}
                onChange={handleChange}
                onError={handleError}
                placeholder="Placeholder"
                isDisabled={!checkedOptions[item.name]}
                inputClassName="rename-input-box"
                value={value}
              />
            </div>
          ))}
        </div>
      </MediaCard>
    </div>
  );
}

Looking for a solution, how display my typed text only in the related input field and get that value in particular state.




Aucun commentaire:

Enregistrer un commentaire