CODEWITHSUNDEEP
reactjs
luckydev
luckydev

Reputation: 149

How to change input with a given value?

How do I change input with a predefined value? To edit certain elements, the data in the value is obtained from the database, well, the idea is that when the user clicks on “Edit”, he has a window for accessing elements in which there was an old info

import React from "react";
import "./styles.css";

export default function App() {
  const arr = { company: [{ companyName: "Apple" }] };

  const blockCreate = () => {
    return arr.company.map(project => (
      <input type="text" value={project.companyName} />
    ));
  };

  return (
    <div className="App">
      <div>{blockCreate()}</div>
    </div>
  );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Now nothing can be entered in input, but at the same time it outputs what is needed What to do?

Upvotes: 0

Views: 33

Answers (1)

Shmili Breuer
Shmili Breuer

Reputation: 4147

To be able to modify your input value you need to hook it up to a value in the component state.

To do this in a functional component you need to use useState and assign a state variable inputValue and a function to update the value updadeValue to useState.

Then pass inputValue to the value for the input and updadeValue to the onchange event of the input.

I would modify the code to look like this,

import React, {useState} from "react";
import "./styles.css";

export default function App() {
    const arr = { company: [{ companyName: "Apple" }] };

    let [inputValue,updadeValue] = useState(project.companyName)

    const blockCreate = () => {
        return arr.company.map(project => (
            <input type="text" value={inputValue} onChange={(e) => updadeValue(e.target.value) } />
        ));
    };

    return (
        <div className="App">
            <div>{blockCreate()}</div>
        </div>
    );
}

Upvotes: 1

Related Questions