Tengo en mi componente React esta función:

 const url = '/category'; function hideOnClick(id) { setHide({value: id}) console.log(id); const body = { 'chordId' : id, } const requestMetadata = { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body) }; console.log(body); fetch(url, requestMetadata) .then(res => res.json()) .then(res => { this.setState({ url: res }) console.log(res); }) }

En mi ruta/web esta línea:

 Route::post('/category', [PostController::class, 'postBody']);

Y finalmente en mi PostController esta función

 public function postBody(Request $request) { $chord = $request->get('chordId'); $posts = Post::join('categories', function ($builder) { $builder->on('categories.id', '=', 'posts.category_id'); }) ->where('name', '=', Str::before($chord, '.')) ->get(); return view("posts.index-category")->with(array("posts" => $posts)); }

Tengo este gráfico renderizado dinámicamente con categorías y quiero hacerlo interactivo y usarlo para filtrar publicaciones según el lugar en el que el usuario hace clic en el gráfico.

En este momento, en mi pestaña de red, puedo ver la solicitud de obtención con un estado de 200, y en la vista previa veo mi categoría de índice de vista con las publicaciones correctas, según el filtro en mi PostController.

Pero no sé cómo mostrar este resultado en mi página sin actualizar la página completa. Creo que tengo que usar algo como ajax pero no sé cómo. Alguien tiene alguna sugerencia?