How to apply Search feature

 Step 01:      

this.state = {

      student: {

        first_name: "",

      },

Step 02:

       <FormGroup row>

            <Col sm={5}>

              <Input

                type="text"

                name="first_name"

                placeholder="Search Student With Name"

                value={student.first_name}

                onChange={this.handleChange}

                autoFocus

              />

              {submitted && !student.first_name && (

                <div style={{ color: "red" }} className="help-block">

                </div>

              )}

            </Col>

            <Col sm={2}>

              <Button type="submit">Submit</Button>

            </Col>

          </FormGroup>

  Step 03: In the backend code: byebug lagakar code ko check kiya 

  eval(IO.read('doc/api_doc/students/index.html'), binding)

  def index

    if params[:search].present?

      students = Student.all.where("LOWER(first_name) LIKE ? or LOWER(last_name) LIKE ?", "%#{JSON.parse(params[:search])["first_name"].downcase}%", "%#{JSON.parse(params[:search])["first_name"].downcase}%")

    else

      students = current_user && current_user.superadmin_role? ? Student.all : current_school.students

    end

    @students_data = students.paginate(:page => params[:page], :per_page => 10)

    @student_record = []

    @students_data.each do |stu|

      @student_record << [stu, stu.standard, stu.section]

    end

    return render json: {status: 200, data: {students: @student_record, count: students.count}, :message =>"all students list"}  

      # students = Student.all

      # if params[:q]

      #   @students = students.where('lower(studentname) LIKE ?',"%#{params[:q].downcase}%")

      # end

      # @students = students.paginate(:page => params[:page], :per_page => 10)

      # return render json: {status: 200, data: {students: student_as_json(students: @students), count: students.count}, message: "all students list"}

  end

  

  Step 04:  student actions mein change kiya hai 

actions mein getall mein stu liya hai jo data mein aa raha hai backend mein and usko check kiya debugger lagakar console par ki woh cheej aa rahi hai ya nai  broser par console mein check kiya

function getAll(stu) {

    return dispatch => {

        dispatch(request());

        studentService.getAll(stu)

            .then(

                students => dispatch(success(students.data)),

                error => dispatch(failure(error.toString()))

            );

    };

    function request() { return { type: studentConstants.GETALL_REQUEST } }

    function success(students) { return { type: studentConstants.GETALL_SUCCESS, students } }

    function failure(error) { return { type: studentConstants.GETALL_FAILURE, error } }

}

  Step 05:  Student service mein bhi change kiya hai 

function getAll(stu) {

    console.log("getAll AuthHeader.getHeader():  ", AuthHeader.getHeader())

    const requestOptions = {

        method: 'GET',

        headers: AuthHeader.getHeader()

    };

    if (stu){

        return fetch(`${BASE_URL}students?search=${JSON.stringify(stu)}`, requestOptions).then(handleResponse);

    }

    else{

        return fetch(`${BASE_URL}students`, requestOptions).then(handleResponse);

    }       

}