Meme Maker -- didn't get it to work #3
Conversation
|
I didn't host it anywhere, so here's a video of it kinda working |
|
Suggest upload the site and/or video in the future. If you would like help with this... I can help you out :) |
| @@ -0,0 +1,44 @@ | |||
| import React, { useState } from 'react'; | |||
| import logo from './logo.svg'; | |||
There was a problem hiding this comment.
If you are not using the logo, it is better to clean everything you do not need before starting work
| import ImageEditor from './components/ImageEditor'; | ||
|
|
||
| function App() { | ||
| const [imgURL, setImgURL] = useState(null); |
There was a problem hiding this comment.
No need to add "null" you can leave the useState empty
| const [imgURL, setImgURL] = useState(null); | ||
| const [uploaded, setUploaded] = useState(false); | ||
|
|
||
| const handleUpload = (event) => { |
There was a problem hiding this comment.
pYou could deconstruct the event earlier, to make it more readable and easy to work with the const handleUpload = ({target: {files}) => {
Here more info: https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Operadores/Destructuring_assignment
|
|
||
| const handleUpload = (event) => { | ||
| setImgURL(URL.createObjectURL(event.target.files[0])); | ||
| console.log(event.target.files[0]); |
There was a problem hiding this comment.
You can delete the console.log once you have finished developing
| }; | ||
|
|
||
| const fileUploader = ( | ||
| <div class="file"> |
There was a problem hiding this comment.
Although it allows you to use "class" it recommends you and you should always use "className" to avoid mistakes and to respect the recommendations that React makes you
more info here: facebook/react#13525 (comment)
| <input | ||
| type="file" | ||
| className="file-input" | ||
| onChange={(event) => handleUpload(event)} |
There was a problem hiding this comment.
If you don't activate the function you don't need to add an anonymous function. This way it is cleaner:
onChange={handleUpload}
| @@ -0,0 +1,118 @@ | |||
| import React, { useState } from 'react'; | |||
| const ImageEditor = (props) => { | |||
| const convertToImage = () => { | ||
| //getting the SVG data | ||
| const svg = document.querySelector('svg'); | ||
| let xml = new XMLSerializer().serializeToString(svg); |
There was a problem hiding this comment.
i think that here you can use "const"
| dominantBaseline="middle" | ||
| style={textStyle} | ||
| > | ||
| {topText} |
| className="input" | ||
| type="text" | ||
| value={topText} | ||
| onChange={(e) => setTopText(e.target.value)} |
There was a problem hiding this comment.
In the arrow function if you only have one argument, you don't need to put it in parentheses
|
The application looks very good, the code is quite readable and I have not found any major flaw. Congratulations |
No description provided.