I created an image in child component (I think that is called child component, sorry if I am wrong). I want to use that image in parent component but I don't know how to do it properly and got error message of 'finaleImg' is not defined.
function App() {
const dragUrl = React.useRef();
const stageRef = React.useRef();
const [files, setFiles] = useState([])
const onSuccess = (savedFiles) => {
setFiles(savedFiles)
};
const DropDownMenu = ({ files }) => {
console.log("files", files)
const [value, setValue] = React.useState('');
const handleChange = (event) => {
setValue(event.target.value);
//console.log("handleChange", event.target.value)
dragUrl.current = `//localhost:5000/${event.target.value}`;
console.log("dragurl", dragUrl.current)
};
const [finaleImg] = useImage(dragUrl.current);
console.log("finaleImg", finaleImg)
return (
<div>
<label>
Choose Floor
<select value={value} onChange={handleChange}>
{files.map((file, i) => (
<option
key={i}
value={file.src}>{file.filename}</option>
))}
</select>
</label>
{/*<p>Floor!</p>*/}
</div>
);
}
return (
<div className="App">
<div className='fileUploader'>
<FileUploader onSuccess={onSuccess} />
</div>
<div className='uploaded-images'>
{/*<Preview files={files} />*/}
<DropDownMenu files={files} />
</div>
<div className='stage'>
<div>
<br />
{ /*<Preview files={files} />*/}
<div
>
<Stage
width={window.innerWidth}
height={window.innerHeight}
/*width= "1500"
height = "1500"*/
style={{ border: '1px solid grey' }}
ref={stageRef}
>
<Layer>
<Rect
width={window.innerWidth}
height={window.innerHeight}
fill="red"
//fillPatternImage={finaleImg}
/>
</Layer>
</Stage>
</div>
</div>
</div>
</div>
);
}
export default App;
With const [finaleImg] = useImage(dragUrl.current); I created the image in DropDownMenu function and I can see it in the console between img tags. But I need to use it in the //fillPatternImage={finaleImg} where that line is placed in return of App function. How can I use it?
This is what I got when I uncommented the line //fillPatternImage={finaleImg}:
And this is what I got when it is commented, I wanted to show you finaleImg is working:
