React state passed as prop to child component not showing

Question

I created a state with hooks. Then, used the hook to modify it's value from a different component. Then I send that state to a third component which recieves it according to Chrome's developer tools, but I CANT SHOW IT! Am I going crazy?

Create the state

//Paso en el que estoy del stepper
let [stepper, modificarStepper] = useState({
    step: 1,
    datosFormCliente:{
        nombreCliente:'',
        apellidoCliente:'',
        cuitCliente:'',
        dir:'',
        trabajaEn:'',
        cel: 0,
    },
    urlPagare:'',
    urlBoletaSueldo:''
});
let {step, datosFormCliente} = stepper;

I'm not showing how i modify the state because i know it's done properly using it's hook: I modify the stepper.datosFormCliente contents. Then, I pass it to a child component:

<ControlarDatos
  datosFormCliente={datosFormCliente}
  clickPasoStepper={clickPasoStepper}
/>

Then over ControlarDatos component, chrome's dev tools shows: https://ibb.co/Vxm1Mvv

So now the QUESTION:

Over the child component I'm not being able to simply ECHO the props values. Here is my code:

import React, { Fragment } from "react";

const ControlarDatos = (datosFormCliente) => {
  const {
    nombreCliente,
    apellidoCliente,
    cuitCliente,
    dir,
    trabajaEn,
    cel,
  } = datosFormCliente;

  return (
    <Fragment>
      <div className="alert alert-danger" role="alert">
        <h4 className="alert-heading">Controlar datos y confirmar venta</h4>
        <p>
          Ya casi terminas, solo tenés que controlar los datos del comprador y
          confirmar la venta:
        </p>
        <hr />
        <p>Nombres: {nombreCliente} </p>
        <p>Apellidos: {apellidoCliente} </p>
        <p className="mb-0"></p>
        <hr />
        <button className="btn btn-danger">Confirmar venta!</button>
      </div>
      {nombreCliente}
    </Fragment>
  );
};

export default ControlarDatos;

Console gives me no errors. The project compiles. Still, can't echo those values.

Answer 1

This is because you are not destructuring the datosFormCliente prop but instead name the props as datosFormCliente. So, it is not your datosFormCliente prop, it is the props object.

Instead use:

const ControlarDatos = ({ datosFormCliente }) => {

Answer 2

@devserkan's answer is correct.

Also just a small improvement, you don't need to use Fragment. Instead you can just use <> ... </>.
It's the same thing.

So it will be like this:

import React from 'react';

const ControlarDatos = ({ datosFormCliente }) => {

const {
  nombreCliente,
  apellidoCliente,
  cuitCliente,
  dir,
  trabajaEn,
  cel
} = datosFormCliente;

  return ( 
    <>
      <div className="alert alert-danger" role="alert">
        <h4 className="alert-heading">Controlar datos y confirmar venta</h4>
        <p>Ya casi terminas, solo tenés que controlar los datos del comprador y confirmar la venta:</p>
        <hr/>
        <p>Nombres: {nombreCliente} </p>
        <p>Apellidos: {apellidoCliente} </p>
        <p className="mb-0"></p>
        <hr/>
        <button className="btn btn-danger">Confirmar venta!</button>
      </div>
      {nombreCliente}
    </>
  );
}

export default ControlarDatos;