I am trying to make a reusible component , select image and get binairy data back. Using that data in another component is where I am strigling

Question

    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

and then send the image var as wel Is the problem my component how im return the data or Is the problem my component how im return the data or Is the problem my component how im return the data or ////////////////////////////////////////////////////////////////////////////////////////////// import React, { useState } from 'react'; import axios from '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>
            
        );
    }

Answer 1

Manage the state in parent component and pass it as props to LogoUpload Function

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

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