New to react currently working on a project.

Basically I have this functional component that works properly in all aspects apart from when I try to send props to a child component which return

Cannot read properties of undefined

Component:

interface GetOneCompanyProps {
    company?: CompanyModel;
}

function GetOneCompany(): JSX.Element {

    const inputRef = useRef(null);
    const [id, setId] = useState('4');
    const [company, setCompany] = useState<any>('');

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log(id);
   
    }

    async function send() {
      
        try {
            const response = await axios.get<CompanyModel>(globals.adminUrls.getOneCompany   id)

            store.dispatch(oneCompanyAction(response.data));
            console.log(response);
            const company = response.data;
            setCompany(company)
         

        } catch (err) {
            
            notify.error('company with id '   id   ' does not exist');
            
        }
    }

    useEffect(() => {

        send();

    }, [id]);

    return (
        
        <div className="getOneCompany">
            <h1>hi  </h1>
            {/* <form onSubmit={handleSubmit}>
                <label>Company ID</label>
                <input value={id} onChange={(e) => setId(e.target.value)} type="number" />
                {company.name === '' && <EmptyView msg="bla bla" />}
            </form> */}

            <form onSubmit={handleSubmit}>
                <label>Company ID</label>
                <input type="number" ref={inputRef} />
                <button value={id} type="button" onClick={() => setId(inputRef.current.value)}>Search</button>
               
              
            </form>

             <AdminCard  {...company} /> 

            <div className="top">
            </div>
            <br/>
            Company: {id}
            <br/>
            Client Type: {company.clientType}
            <br/>
            Company Name: {company.name}
            <br/>
            Email Adress: {company.email}
            <br/>
        </div>

    );
}

export default GetOneCompany;

So what this component does:

Lets user select a number which is the ID of the company and once he clicks the button it return the response data of the company with matching ID from backend.

on this part I have no issue.

My problem comes when trying to pass the response data to my CARD component and display the data on the card.

I have done this method with an array and used map with no problem, however, I am not sure on how to do this with a single object.

Card Componenet:

interface CardProps {
    company?: CompanyModel;
  }
  export default function ImgMediaCard(props: CompanyModel) {
    return (
      <Card sx={{ maxWidth: 345 }}>
        <CardMedia
          component="img"
          alt="green iguana"
          height="180"
          image={CompanyImage}
        />
        <CardContent>
          <Typography gutterBottom variant="h5" component="div">
           
            {props.company.name}
          </Typography>
          <Typography variant="body2" color="text.secondary">
          {props.company.email}
          </Typography>
        </CardContent>
        <CardActions>
          <Button size="small">DELETE COMPANY</Button>
        </CardActions>
      </Card>
    );
  }

Can someone tell me what I am doing wrong?

ISSUE:

<AdminCard  {...company} /> 

Hope I am clear on my question,

Thanks.

CodePudding user response：

Try to send prop as <AdminCard company={company} />