I'm trying to create a navigation header that makes that navigation item the only bold item when clicked and all other items normal text. I would also like to create new components for each navigation item clicked, but for now I just want to be able to make the item I'm clicking on bold.
I am very new to react so please bear with me, and I am using functional react because it makes more sense to me so far than classes.
So far it works to click on each header navigation item and set it to bold, and click again and set it to normal text. What I need to understand is how to set only the item clicked to bold and the rest back to normal text.
As mentioned, I'm brand new to react and would prefer to understand this using functions, not classes. Because the majority of information out there is for classes, I've found it difficult to translate the available help from classes to functions, thus my question.
I have this for App.js:
import Header from './components/Header' function App() { return ( <div className="App"> <Header /> </div> ) } export default App I have this for Header.js:
const Header = () => { return ( <header> <nav className="level has-background-white-ter"> <div className="level-left"> <figure className="media-left"> <p className="image is-64x64"><img src="logo.png" alt="something"/></p> </figure> <div className="level-item"> <strong className="title">Header</strong> </div> </div> <div className="level-right"> <> <Nav /> </> <p className="level-item"><button className="button"><a href='/logout'>Logout</a></button> </p> </div> </nav> </header> ) } let headerItems = ['Page-1', 'Page-2', 'Page-3', 'Page-4', 'Page-5', 'Page-6', 'Page-7', '[Page-0]'] const Nav = () => { const changePage = (e) => { e.target.style.fontWeight = e.target.style.fontWeight === "bold" ? "" : "bold"; console.log(e) } return ( headerItems.map((value, index) => { return <p className="level-item" name="nav" key={index} id="summary" onClick={changePage.bind(this)}>{value}</p> }) ) } export default Header I am using Bulma for CSS, so I have this for index.html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" content="#000000" /> <meta name="description" content="Web site created using create-react-app" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="manifest" href="%PUBLIC_URL%/manifest.json" /> <title>Hello</title> </head> <body> <noscript>You need to enable JavaScript to run this app.</noscript> <div id="root"></div> </body> </html> I believe I need to manage property state for each item somehow. Any and all guidance in how to do this with functional react is greatly appreciated!
https://stackoverflow.com/questions/67067199/how-to-bold-only-the-clicked-item-and-unbold-any-other-item-at-the-same-time-in April 13, 2021 at 08:21AM
没有评论:
发表评论