How to get the value of user input field using ReactJS?

Question

i am trying to fetch api-data as per user input field. how to fetch the value of these data?

my api end-point like this "http://localhost:8000/api/p_list?search=" . whenever user input the value, endpoint is like this "http://localhost:8000/api/p_list?search=01" here is the input field value is "01". i want to get the value of the result.

i am probably new to reactjs. i tried something below like this but this is the static API url what i'm trying to fetch. i am not sure how to fetch dynamic url as per user input field.

it would be great if anybody could help me out what i am trying to solve. thank you so much in advance.

./src/productList.js

import React, {Component} from "react";
import Contacts from './productListHook.js';


export default class App  extends Component{

   state = {
       contacts: []
   }

   componentDidMount() {
       fetch('http://localhost:8000/api/p_list?search=')
       .then(res => res.json())
       .then((data) => {
         this.setState({ contacts: data })
       })
       .catch(console.log)
     }

   render(){
   return(

       <Contacts contacts={this.state.contacts} />
   )
}
}

./src/ProductListHook.js


import React from 'react'

    const Contacts = ({ contacts }) => {
      return (

        <section class="product_list section_padding">
        <div class="container">
            <div class="row">
                <div class="col-md-3">
                    <div class="product_sidebar">
                        <div class="single_sedebar">
                            <form action="#">
                                <input type="text" name="#" placeholder="Search keyword"/>
                                <i class="ti-search"></i>
                            </form>
                        </div>
                    </div>
                </div>
                <div class="col-sm-9">
                    <div class="product_list">
                        <div class="row">

                        {contacts.map((contact) => (

                            <div class="col-lg-3 col-md-9">
                                <div class="single_product_item">
                                    <img src={contact.image} alt="" class="img-fluid" />
                                    <h3> <a href={contact.url}>{contact.title}</a> </h3>
                                    <p>From ${contact.price}</p>
                                </div>
                            </div>

                            ))}

                        </div>
                        <div class="load_more_btn text-center">
                            <a href="#" class="btn_3">Load More</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </section>

      )
    };

export default Contacts

You can create a state that contains users input. then it will be stored and usable for you call. — TheoWckr
– TheoWckr, Commented Apr 16, 2020 at 16:07
is this answer what i am trying to solve is "therichpost.com/get-input-field-value-button-click-reactjs" ? @happyZZR1400 — satyajit
– satyajit, Commented Apr 16, 2020 at 16:38
i am probably new to reactjs, i am not sure how to do this. can you please run this code on sandbox environmental ? @TheoWckr — satyajit
– satyajit, Commented Apr 16, 2020 at 16:46

Khabir · Accepted Answer · 2020-04-16 19:38:05Z

1

Hi Please check this complete example: It is taking user id from user using the textbox and after button click it calls api with that user id and get all posts by that user. After that it shows all post title on the screen.

import React, {useEffect, useState} from "react";
import axios from 'axios';

function PostListPageByUser() {
    const [posts, setPost] = useState([]);
    const [userId, setUserId] = useState([]);
    let signal = axios.CancelToken.source();

    function handleChange(event) {
        setUserId(event.target.value);
    }

    function handleClick(event) {
        axios.get(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`, {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);
            }).catch(err => {
            console.log(err);
        });
    }
    return (
        <React.Fragment>
            <span>Enter User Id</span>
            <input type="text" onChange={handleChange}/>
            <button onClick={handleClick}>Get Posts By User</button>
            <ul>
                {
                    posts.map(post => <li key={post.id}>{post.title}</li>)
                }
            </ul>
        </React.Fragment>
    );
}
export default PostListPageByUser;

As per your comment on my answer I added this example with form submit:

import React, {useEffect, useState} from "react";
import axios from 'axios';

function PostListPageByUser() {
    const [posts, setPost] = useState([]);
    const [userId, setUserId] = useState([]);
    let signal = axios.CancelToken.source();

    function handleChange(event) {
        setUserId(event.target.value);
    }

    function handleSubmit(event) {
        event.preventDefault();
        axios.get(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`, {
            cancelToken: signal.token,
        })
            .then(res => {
                const posts = res.data;
                setPost(posts);
            }).catch(err => {
            console.log(err);
        });
    }

    return (
        <form onSubmit={handleSubmit}>
            <span>Enter User Id</span>
            <input type="text" onChange={handleChange}/>
            <button type="submit">Get Posts By User</button>
            <ul>
                {
                    posts.map(post => <li key={post.id}>{post.title}</li>)
                }
            </ul>
        </form>
    );
}

export default PostListPageByUser;

edited Apr 16, 2020 at 19:38

answered Apr 16, 2020 at 17:12

Khabir

5,8781 gold badge26 silver badges38 bronze badges

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

12 Comments

satyajit Over a year ago

okay! if i have <form action=""> , then what should i pass inside the action?

Khabir Over a year ago

hi for form, you should use <form onSubmit={handleClick}> and button type will be submit as below: <input type="submit" value="Submit" />

satyajit Over a year ago

hi , it's doesn't taking any input in search fields insted of it taking "Submit" as argument.

Khabir Over a year ago

hi I have added another example that works fine. please check that.

satyajit Over a year ago

why did you end the "</form>" tag in the last section? you can put the "</form>" tag after end of "</button>" tag. is that cause any error?

|

Andrew Ribeiro · Accepted Answer · 2020-04-16 17:11:22Z

Your Contacts component has the input but the API call is being made in its parent App component.

What you need to do is pass another prop to Contacts that is a function that will be called everytime the input state inside Contacts change.

Example:

class App extends React.Component {
  ...

  search(inputValue){
    fetch(`http://localhost:8000/api/p_list?search=${inputValue}`)
    .then(res => res.json())
    .then((data) => {
      this.setState({ contacts: data })
    })
    .catch(console.log)
  }

  render() {
    <Contacts contacts={this.state.contacts} onSearch={search}/>
  }

Now inside Contacts component:

const Contacts = ({contacts, onSearch}) => {
  const [search, setSearch] = useState('');
  return (
    ...
    <input onChange={
           (e) => {
            setSearch(search);
            onSearch(e.currentTarget.value);
           }
         } value={search} .../>
    ...
   )
}

I just wrote the conceptual code to make it work, it's missing bind and the other specific implementation about your project.

I strongly recommend you to implement a logic inside onSearch function to delay the API call because it will be triggered in new letter typed in the input. This can overload the api.

Hope it helps.

Collectives™ on Stack Overflow

How to get the value of user input field using ReactJS?

2 Answers 2

12 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related