प्रतिक्रिया - चाइल्ड कंपोनेंट रिटर्न के लिए डेटा पास करना: अपरिभाषित के गुण नहीं पढ़ सकते हैं

वर्तमान में एक परियोजना पर काम कर रहे प्रतिक्रिया के लिए नया।

मूल रूप से मेरे पास यह कार्यात्मक घटक है जो सभी पहलुओं में ठीक से काम करता है, इसके अलावा जब मैं एक child घटक को प्रोप भेजने की कोशिश करता हूं जो वापस आता है

Cannot read properties of undefined

घटक:

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;

तो यह घटक क्या करता है:

उपयोगकर्ता को एक नंबर चुनने देता है जो कंपनी का ID है और एक बार जब वह clicks बटन देता है तो वह कंपनी के response data को बैकएंड से मिलान ID के साथ वापस कर देता है।

इस हिस्से में मुझे कोई समस्या नहीं है।

मेरी समस्या तब आती है जब response data को मेरे CARD घटक को पास करने और कार्ड पर डेटा प्रदर्शित करने का प्रयास करते हैं।

मैंने इस विधि को एक सरणी के साथ किया है और बिना किसी समस्या के map का उपयोग किया है, हालांकि, मुझे यकीन नहीं है कि इसे किसी एक ऑब्जेक्ट के साथ कैसे किया जाए।

कार्ड कम्पोननेट:

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>
    );
  }

क्या कोई बता सकता है कि मुझसे क्या गलत हो रहा है?

समस्या:

<AdminCard  {...company} /> 

आशा है कि मैं अपने प्रश्न पर स्पष्ट हूँ,

धन्यवाद।