Блог

     Getting data in the console but want to import the var image to be used in another component
    Example would be to  do this in another component
  

а затем отправьте переменную изображения как wel
Проблема в моем компоненте, как я возвращаю данные, или проблема в моем компоненте, как я возвращаю данные, или проблема в моем компоненте, как я возвращаю данные или
//////////////////////////////////////////////////////////////////////////////////////////////
импортируйте React, {useState } из ‘react’;
импортируйте axios из ‘axios’;

     export default function LogoUpload() {
        const [image, setImage] = useState(''); //Wnat to export this variable
        const [selectedFile, setSelectedFile] = useState('');
        const fileUpload = React.createRef();
    
        function onFileChangeHandler(e) {
            // routine to run when the user selects a file to upload as an image
            e.preventDefault();
            const file = e.target.files[0];
            var promise = new Promise((resolve, reject) => {
                const reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onload = () => resolve(reader.result);
                reader.onerror = e => reject(e);
            });
            promise.then(response => {
                setImage(response);
                setSelectedFile(file);
                    console.log(response);
            });
        }
    
         function showFileUpload(e) {
            e.preventDefault();
            fileUpload.current.click();
            return image;
        }
    
// export this function dont know how :(
        function getImageData() {
            return image;
        }
    
        return (
//Click and display image and get data
            <div className="AddImage">
                <input
                    type="file"
                    id="imageUpload"
                    style={{ display: 'none' }}
                    ref={fileUpload}
                    onChange={onFileChangeHandler}
                />
    
                <input
                    type="image"
                    style={{
                        width: '100px',
                        height: '100px',
                        borderRadius: '50%',
                        objectFit: 'cover',
                        objectPosition: 'center',
                    }}
                    src={image}
                    alt="Add Logo"
                    onClick={showFileUpload}
                />
            </div>
            
        );
    }
  

Управляйте состоянием в родительском компоненте и передавайте его в качестве реквизита функции LogoUpload

 export default function LogoUpload(image, setImage) {
 ...
}

class ParentComponent: React.FC = () => {
  const [image, setImage] = useState('');
  
  return (
    ...
    <LogoUpload image={image} setImage={setImage} />
    ...
  );
}