quiero hacer un buscador de clientes por número de identificación, por ahora tengo que al momento de digitar el numero y hacer click en el boton me mande el n° de doc al backend en Laravel, logro que me retorne el valor, pero no puedo imprimirlo en la sección que quiero. Hace poco inicie con React, entonces si alguien me puede ayudar, gracias.
/index.js
import React, { Component, useState } from 'react';
import ReactDOM from 'react-dom';
import SalesDetails from './cafeto/SalesDetails';
import SearchForm from './cafeto/SearchForm';
export default class Index extends Component {
constructor(props) {
super(props);
this.state = { value: "" };
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleChange(event) {
this.setState({ value: event.target.value });
}
async handleSubmit(event) {
event.preventDefault();
let result = await fetch(`http://127.0.0.1:8000/+++/+++/+++/search/${this.state.value}`, {
method: 'GET'
});
let data = await result.json()
}
render() {
return ( <div>
<SearchForm handleSubmit={this.handleSubmit} value={this.state.value} handleChange={this.handleChange} />
<SalesDetails
//Componente en el que quiero imprimir los datos, documento.
/>
</div>
);
}
}
if (document.getElementById('example')) {
ReactDOM.render(<Index />, document.getElementById('example'));
}
/SearchForm.jsx
En este componente tengo el formulario donde realizo el envio del dato al backend, lo recibo y hago la petición a la base de datos
import React from "react";
export default function SearchForm(props) {
return (
<div>
<div className="card card-outline shadow">
<div className="card-header">
<h3 className="card-title">Sales</h3>
</div>
{/* /.card-header */}
<div className="card-body">
<div className="row justify-content-center">
<div className="col-md-6">
<form
method="POST"
acceptCharset="UTF-8"
onSubmit={props.handleSubmit}
>
<input
type="hidden"
name="_token"
defaultValue="DyRd0muSjN3MGHBFxcLoN21zv7HZsub9iQPjkvse"
/>
<input
value={props.value}
onChange={props.handleChange}
className="form-control"
placeholder="Ingrese el documento."
required
name="search"
type="search"
/>
<br />
<div className="row justify-content-center">
<div className="col-md-2">
<input
className="btn btn-primary"
type="submit"
defaultValue="Buscar"
/>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
);
}
salesDetails.jsx y este es el componente donde quiero imprimir la consulta, para luego generar una factura.
import React, { Component } from "react";
export default function SalesDetails(props) {
return (
<div>
<div className="card card-outline shadow">
<div className="card-header">
{/* <h3 className="card-title">Sales</h3> */}
</div>
{/* /.card-header */}
<div className="card-body">
<div className="row justify-content-center">
<div className="col-md-6">
// Documento
</div>
</div>
</div>
</div>
</div>
);
}