Scribd
Upload
4 views2 pages

React Lab 4

The document contains two React components: UserProfile and StyledButton. UserProfile displays user information such as username, age, and location, while StyledButton creates a button with customizable text, color, and size. Both components are imported and used in their respective App.js files.

Uploaded by

thirdeye353
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views2 pages

React Lab 4

The document contains two React components: UserProfile and StyledButton. UserProfile displays user information such as username, age, and location, while StyledButton creates a button with customizable text, color, and size. Both components are imported and used in their respective App.js files.

Uploaded by

thirdeye353
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd

Question 1:-

//[Link]

function UserProfile(props) {
return (
<p>
Username: {[Link]} | Age: {[Link]} | Location: {[Link]}
</p>
);
}
export default UserProfile;

//[Link]

import UserProfile from './UserProfile';


function App() {
return (
<div>
<UserProfile username="John" age={25} location="New York" />
</div>
);
}
export default App;

Question 2:-

//[Link]

function StyledButton({ buttonText, color, size }) {


return (
<button style={{ backgroundColor: color, fontSize: size }}>
{buttonText}
</button>
);
}
export default StyledButton;

//[Link]

import StyledButton from './StyledButton';


function App() {
return (
<div>
<StyledButton buttonText="Click Me" color="blue" size="18px" />
</div>
);
}
export default App;

You might also like