How Do I Bind A HTML Input To A Function In React?

Question

I have the following in my React component

export default function BookAdderComponent(props) {
  const booksPresenter = new BooksRepository();

  return (
    <>
     <h5>Add Book</h5>
      name : <input></input><br/>
      title : &nbsp;&nbsp; <input></input><br/>
      <button onClick={() => {
            booksRepo.addBook({
              id: 131,
              name: "My Book",   //.1 how do I bind to name input?
              ownerId: "[email protected]",
              author: "tom hurst" //.2 how do I bind to title input?
            })
          }}>
          add book
        </button>
    </>
  );
}

How do I 2-way-bind my two html input values to things I am going to send in my repository function later on?

I'm looking for the simplest easiest way I need to demo this to someone.

Not sure if this is what you want/need but you could create a state to hold the input values and then populate it using onChange. From there you can reference your state in addBook e.g name : this.state.name — Reez0
– Reez0, Commented Nov 1, 2019 at 6:48

tarzen chugh · Accepted Answer · 2019-11-01 07:13:35Z

In the example below I have added name and title of book to state and passed that data down to booksRepo addBook method on button click titled Add Book

Below is the working code:

index.js

import React from "react";
import ReactDOM from "react-dom";
import booksRepo from "./booksRepo";


class App extends React.Component {
  state = {
    name: "",
    title: ""
  };
  handleClick = e => {
    e.preventDefault();
    booksRepo.addBook(this.state);
  };
  render() {
    return (
      <div className="App">
        <h5>Add Book</h5>
        <label>Name:</label>
        <input
          type="text"
          value={this.state.name}
          onChange={e => {
            this.setState({ name: e.target.value });
          }}
        />
        <br />
        <br />
        <label>title:</label>
        <input
          type="text"
          value={this.state.title}
          onChange={e => {
            this.setState({ title: e.target.value });
          }}
        />
        <br />
        <br />
        <button onClick={this.handleClick}>Add Book</button>
      </div>
    );
  }
}

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

booksRepo.js

const addBook = ({ name, title }) => {
  console.log("the name of books is ", name);
  console.log("the title of books is ", title);
};

const booksRepo = {
  addBook: addBook
};

export default booksRepo;

Hope that helps!!!

Collectives™ on Stack Overflow

How Do I Bind A HTML Input To A Function In React?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest