CODEWITHSUNDEEP
javascriptreactjsuse-state
bradyjurekdev
bradyjurekdev

Reputation: 1

How do I increase the font size of a different components element using reactjs

So I am trying to increase the font size of the paragraph element in the content.jsx file using the button with the onClick of handleFontSize in the header.jsx. Right now my issue is that the increaseFont function in App.jsx is not working correctly. It is only staying at 12 each time I click the button. I want it to go up two font sizes each time so it would make the fontSize 12px(default) then 14px then 16px and so on.

Header.jsx file

import React from "react"; react

function Header ({ loggedIn, handleLoggedInClick, handleFontSize }) {
  return (
    <div>
      <button onClick={handleLoggedInClick}>
        {loggedIn ? "Log Out" : "Log In"}
      </button>
      <button onClick={handleFontSize}>
        Increase
      </button>
    </div>
  );
}

export default Header;

Content.jsx file

import React from "react";

function Content ({ loggedIn, fontSize }) {
  return loggedIn && <p style={{fontSize:{fontSize}}}>CONTENT</p>;
}

export default Content;

App.jsx file

import React, { useState } from "react";
import Content from "./Content";
import Header from "./Header";

function App () {
  const [loggedIn, setLoggedIn] = useState(false);
  const [newFontSize, setFontSize] = useState(12);
  const toggleLoggedIn = () => setLoggedIn(!loggedIn);
  
  const increaseFont = () => setFontSize(newFontSize + 2)
  
  
  return (
    <div>
      <Header loggedIn={loggedIn} handleLoggedInClick={toggleLoggedIn} />
      <Content loggedIn={loggedIn} handleFontSize={increaseFont} fontSize={newFontSize} />
    </div>
  );
}

export default App;

Upvotes: 0

Views: 2272

Answers (2)

crispengari
crispengari

Reputation: 9321

Try this:

App.js

import React, { useState } from "react";
import Content from "./Content";
import Header from "./Header";

function App () {
  const [loggedIn, setLoggedIn] = useState(false);
  const [newFontSize, setFontSize] = useState(12);
  const toggleLoggedIn = () => setLoggedIn(!loggedIn);
  
  const increaseFont = () => setFontSize(newFontSize + 2)
  
  
  return (
    <div>
      <Header loggedIn={loggedIn} handleLoggedInClick={toggleLoggedIn} handleFontSize={increaseFont}  />
      <Content loggedIn={loggedIn} fontSize={newFontSize} />
    </div>
  );
}

export default App;

Content.jsx

import React from "react";

function Content ({ loggedIn, fontSize }) {
  return loggedIn && <p style={{fontSize:fontSize}}>CONTENT</p>;
}

export default Content;

Header.jsx

import React from "react"; react

function Header ({ loggedIn, handleLoggedInClick, handleFontSize }) {
  return (
    <div>
      <button onClick={handleLoggedInClick}>
        {loggedIn ? "Log Out" : "Log In"}
      </button>
      <button onClick={handleFontSize}>
        Increase
      </button>
    </div>
  );
}

export default Header;

Try this and let me know if it works, i only edited the first two files

Upvotes: 1

Vo Quoc Thang
Vo Quoc Thang

Reputation: 1396

You're passing handleFontSize to the wrong component.It should be passed to Header component

   <div>
      <Header loggedIn={loggedIn} handleLoggedInClick={toggleLoggedIn} handleFontSize={increaseFont} />
      <Content loggedIn={loggedIn} fontSize={newFontSize} />
    </div>

Upvotes: 0

Related Questions