Please help Im not sure why export component is not being recognized or useState Hook. The
is not passing either. can I please get a hint?
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Color Picker</title>
<link rel="stylesheet" href="styles.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
<script
data-plugins="transform-modules-umd"
type="text/babel"
src="index.jsx"
></script>
</head>
<body>
<div id="root"></div>
<script
data-plugins="transform-modules-umd"
type="text/babel"
data-presets="react"
data-type="module"
>
import { ColorPicker } from './index.jsx';
ReactDOM.createRoot(document.getElementById('root')).render(<ColorPicker />);
</script>
</body>
</html>
/* file: styles.css */
body,
html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
}
#color-picker-container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #ffffff;
}
input[type="color"] {
position: absolute;
margin-top: 50px;
height: 40px;
}
/* file: index.jsx */
import { useState } = React;
export const ColorPicker= () =>{
const [color, setColor] = useState('#ffffff');
return(
<div className = "color-picker-container" style={{ backgroundColor = "white"}} >
<p>Pick A Color</p>
<input className="color-input" type="color"/>
</div>
)
};
User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36
Build a Color Picker App - Build a Color Picker App
Teller
June 25, 2025, 4:32am
2
Hi @aliciadorsey2
This syntax does not look right.
Happy coding
1 Like
Please help, can I get a hint to why my #color-input is not reading my useState?
<!-- file: index.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Color Picker</title>
<link rel="stylesheet" href="styles.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.5/babel.min.js"></script>
<script
data-plugins="transform-modules-umd"
type="text/babel"
src="index.jsx"
></script>
</head>
<body>
<div id="root"></div>
<script
data-plugins="transform-modules-umd"
type="text/babel"
data-presets="react"
data-type="module"
>
import { ColorPicker } from './index.jsx';
ReactDOM.createRoot(document.getElementById('root')).render(<ColorPicker />);
</script>
</body>
</html>
/* file: styles.css */
body,
html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
}
#color-picker-container {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
background-color: #ffffff;
}
input[type="color"] {
position: absolute;
margin-top: 50px;
height: 40px;
}
/* file: index.jsx */
const { useState } = React;
export const ColorPicker = () => {
const [color, setColor] = useState('hex','#ffffff');
return(
<div id = "color-picker-container" style={{ backgroundColor:"white" }} >
<p>"Choose a Color"</p>
<input id ="color-input" type="color" value="useState" color={color} onChange = {setColor}/>
</div>
)
};
User Agent is: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Safari/537.36
Build a Color Picker App - Build a Color Picker App
ILM
June 25, 2025, 9:19am
4
look at the difference between these two
ILM
June 25, 2025, 9:24am
5
I have merged your two topics, please do not open multiple topics for the same challenge
hi I appreciate your response but I’m totally lost on this lab. can you please let me know why #color-input is not reading my useState?
hi I’m stuck again and don’t know how to change the background when the color changes. please help!!
you should probably post your newest code in your reply.
ps. make sure you understand how useState works.https://react.dev/learn/state-a-components-memory )
hi, I’m so new to React and so lost with creating this final step. I created several functions and nothing is working. can you please give me a hint on how to target the background color in my input. I thought that was my target.
const { useState } = React;
export const ColorPicker = () => {
const [color, setColor] = useState('#ffffff');
return(
<div id = "color-picker-container" style={{ backgroundColor:"white" }} >
<p>"Choose a Color"</p>
<input id ="color-input" type="color" value={color} color={color} onChange={setColor}/>
</div>
)
};
I’ve edited your post to improve the readability of the code. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.
You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.
See this post to find the backtick on your keyboard.Note: Backticks (`) are not single quotes (').
1 Like
so when the color changes, you’re expecting React to run which code? (be specific please when you respond)
that’s where I’m stuck, I don’t know how to create a function that targets the input background.
I’m just going to take a break because I’m in tears right now and feel like I can just do some research and come back to this issue.
okay, look at this code:
<div id = "color-picker-container" style={{ backgroundColor:"white" }} >
What does this code do?
the other thing to consider what you’re doing for the onChange part of the input element.
