not getting value in inputbar in react

Lord 0
Viewed 40

I want to get value filled inside input bar to show inside input bar, I know its sounds illogical but I am new to react and I am following a course

code is below

import React from 'react';

class Searchbar extends React.Component{
    state={term :'a'}
    // e means event 
    onChangeHandler=(e)=>{
        console.log(e.target.value);
        this.setState=({term:e.target.value});
    }
    render(){
        return(
            <div className="ui segment">
                <form className="ui form">
                <div className="field">
                    <label>Image Search</label>
                    {/* <input type="text" value={this.state.term} onChange={this.onChangeHandler}/> */}
                     <input type="text" value={this.state.term} onChange={ e=>(this.setState=({term:e.target.value}),console.log(e.target.value))}/>{/* alternate syntax for event handler */}
                    </div>
                </form>
            </div>
        )
    }
}
export default Searchbar;
reactjs javascript
2 Answers

You're almost there actually!
A small tweak to your code does the job:

import React from "react";

class Searchbar extends React.Component {
  state = { term: "a" };
  onChangeHandler = (e) => {
    this.setState((state) => {
      return { term: e.target.value };
    });
  };
  render() {
    return (
      <div className="ui segment">
        <form className="ui form">
          <div className="field">
            <label>Image Search</label>
            <input
              type="text"
              value={this.state.term}
              onChange={(e) => this.onChangeHandler(e)}
            />
          </div>
        </form>
      </div>
    );
  }
}
export default Searchbar;

As outlined here, you shouldn't set the state directly.

My recommendation

Personally, I would make a few changes and I'll explain why.

Class vs Functional

My preference goes out to functional components nowadays. With hooks you'll have all the functionality that classes provide, but with less verbose code. (in my experience).
Also, if you're using a very small and limited component like this, setting an object as your state isn't always needed. A simple string would suffice in this use case.

My change

This is what I would personally write if I had to make a simple input component with state.

import { useState } from "react";

const Searchbar = () => {
  const [input, setInput] = useState("");
  return (
    <div className="ui segment">
      <form className="ui form">
        <div className="field">
          <label>Image Search</label>
          <input
            type="text"
            value={input}
            onChange={(e) => setInput(e.target.value)}
          />
        </div>
      </form>
    </div>
  );
};

export default Searchbar;

I highly recommend you start looking into functional components, if my experience in the field has taught me anything

PiratePie0 
  <input
          type="text"
          value={this.state.term}
          onChange={(e) => (
            (this.setState({ term: e.target.value })),
            console.log(e.target.value)
          )}
        />
Talim Ansari0
Related