Conversation
| import React from "react"; | ||
|
|
||
| export default function List(props) { | ||
| const ingredientsListItems = props.ingredients.map((ingredient) => ( |
There was a problem hiding this comment.
Instead of props.ingredients or props.getRecipe, you can destructure the object directly in the function arguments and you can directly use the properties of the object.
e.g.
export function List({ingredients, ....}) {
const ingredientsListItems = ingredients.map((ingredient) => (
}
| @@ -0,0 +1,27 @@ | |||
| import React from "react"; | |||
|
|
|||
| export default function List(props) { | |||
There was a problem hiding this comment.
default exports should not be used in some bundlers, better to not to use them at all
| document.body.style.background = color; | ||
| } | ||
|
|
||
| const buttonElements = mapData.map((item) => { |
There was a problem hiding this comment.
Its not a good convention to have 2 rendering functions in one component. Better to split the return logic into separate component Button for example
| <div className="container_buttons_colors"> | ||
| <div className="control_btn"> | ||
| <button onClick={toggleControls} className="control_btn"> | ||
| <p class="material-icons">color_lens</p> |
There was a problem hiding this comment.
Is it working with "class"??
| import Timer from "./Timer"; | ||
|
|
||
| export default function Main() { | ||
| const [seconds, setSeconds] = React.useState("00"); |
There was a problem hiding this comment.
Similar to destructuring of props, you can destructure also imports from react. If you import it like
import {useState} from 'react'
you can use it without the prefix React. everytime
| const [seconds, setSeconds] = React.useState("00"); | ||
| const [minutes, setMinutes] = React.useState(25); | ||
|
|
||
| function startTimer() { |
There was a problem hiding this comment.
I saw some examples ealier too. Inside the function component, better to rewrite the functions with () => {} syntax (arrow function syntax)
There was a problem hiding this comment.
Then you can move the function inside the useEffect, so it doesnt have to render every time when component rerenders.
Deleted the default <title>Vite + React</title> tag from the HTML head. This prepares the file for a custom title or dynamic title management.
Replaces the single ButtonsColors component with ButtonsColorsBg and ButtonsColorsText components. Updates imports to use named imports and adjusts the component order in the App component.
Deleted the ButtonsColors.jsx file from the components directory. This component handled color selection and background changes, but is no longer needed.
Introduces a new React component that displays a set of color buttons allowing users to change the page background color. The component toggles visibility of the color picker and updates the background on selection.
Introduces a new React component that displays a set of color buttons for changing the color of all span elements' text. The component toggles visibility of the color picker and uses data from dataTextColor.
Deleted the ButtonsFunction.jsx file from the components directory as it was not being used and contained no functional code.
Renamed the default export 'data' to 'dataBgColor' and changed it to a named export. Added a new 'dataTextColor' array and exported it as well to support text color options.
Replaces local timer state with an isPaused state and a togglePauseResume function, which are now passed as props to the Timer component. This prepares Main for improved timer control and interaction.
Replaces placeholder Timer component with a functional Pomodoro timer. Adds state management for minutes, seconds, and break mode, interval-based countdown, and pause/resume functionality. Updates document title with remaining time and improves UI layout.
Reorganized and renamed CSS classes for better structure and clarity. Improved layout and responsiveness of timer, buttons, and color pickers. Added new styles for button positioning, hover effects, and mobile responsiveness.
2 participants
skuska