Style selector for dynamic drop-down menus

Question

Style selector for dynamic drop-down menus

import React, { Component } from "react";

export default class FontChanger extends Component{

    constructor(props){
        super(props);
        this.state ={
            selectedFont: "",
            currentFont: "",
        };
        this.handleFontChange = this.handleFontChange.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleFontChange(event){
        this.setState({
            currentFont: event.target.selectedFont,
            selectedFont: this.state.value
        });
    }

    handleSubmit(event) {
        event.preventDefault();
        this.setState({ currentFont: this.state.selectedFont });
    }

    render() {
        return(
            <div>
                <form onSubmit={this.handleSubmit}>
                    <h1 style={{fontFamily: this.state.currentFont }}>Yuh Yeet</h1>
                    <select onChange={this.handleFontChange}>
                        <option value="Anton">Anton</option>
                        <option value="Calistoga">Calistoga</option>
                        <option value="Fira Sans">Fira Sans</option>
                        <option value="Noto Serif">Noto Serif</option>
                        <option value="Quicksand">Quicksand</option>
                        <option value="Ubuntu">Ubuntu</option>
                        <option value="Times New Roman">Times New Roman</option>
                        <option value="Titillium Web">Titillium Web</option>
                    </select>
                    <button type="submit"> Change </button>
                </form>
            </div>
        )
    }
}

I'm having trouble changing the inline style of the h1 tag with a font selected from my dropdown menu. I've imported all fonts into my index.html from Google Fonts, so that shouldn't be an issue. Could it be an error in how I'm using setState or accessing the state values?

javascript html css inline

Answer 1

Answer №1

The following code functions properly. Here are a couple of points to note:

It is correct that the onSubmit handler is not necessary as mentioned by Taki. However, if you do not use it, the font will change as soon as it is selected, rather than when the "change" button is clicked. Additionally, in Taki's solution, the fontHandler function would not provide the expected result in setting the state. If that function was utilized, the state would need to be set to current: value.target.value
When using the setState(), there are two considerations. 1 - Refrain from referencing the current state; instead, use prevState. State updates are sometimes grouped together, leading to potential errors. 2 - Avoid referencing the eventHandler for two reasons. Firstly, it may not recognize what you are referring to. onChange and onSubmit are not functions defined within your component, but rather attributes to <form> and select respectively. Secondly, it is best practice not to reference functions within the state. Create the function outside of the state object and call it to set the desired state changes.
I have initialized the state with the first select option. This won't impact the functionality of your app, but it will enhance the user experience if the default font is not set to Anton.

Furthermore, consider exploring Hooks and Arrow functions. They can simplify your work and streamline your code.

I trust this breakdown sheds light on why your code may not be functioning as intended. Yeet yeet.

export default class Fonts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedFont: "Anton",
      displayedFont: "Anton"
    };
    this.fontHandler = this.fontHandler.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  fontHandler(event) {
    const font = event.target.value;

    this.setState({
      selectedFont: font
    });
  }

  handleSubmit(event) {
    event.preventDefault();

    this.setState(prevState => ({
      displayedFont: prevState.selectedFont
    }));
  }

  render() {
    return (
      <div>
        {console.log(this.state)}
        <form onSubmit={this.handleSubmit}>
          <h1 style={{ fontFamily: this.state.displayedFont }}>Yuh Yeet</h1>
          <select onChange={this.fontHandler}>
            <option value="Anton">Anton</option>
            <option value="Calistoga">Calistoga</option>
            <option value="Fira Sans">Fira Sans</option>
            <option value="Noto Serif">Noto Serif</option>
            <option value="Quicksand">Quicksand</option>
            <option value="Ubuntu">Ubuntu</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Titillium Web">Titillium Web</option>
          </select>
          <button type="submit"> Change </button>
        </form>
      </div>
    );
  }
}

Answer 2

The following code functions properly. Here are a couple of points to note:

It is correct that the onSubmit handler is not necessary as mentioned by Taki. However, if you do not use it, the font will change as soon as it is selected, rather than when the "change" button is clicked. Additionally, in Taki's solution, the fontHandler function would not provide the expected result in setting the state. If that function was utilized, the state would need to be set to current: value.target.value
When using the setState(), there are two considerations. 1 - Refrain from referencing the current state; instead, use prevState. State updates are sometimes grouped together, leading to potential errors. 2 - Avoid referencing the eventHandler for two reasons. Firstly, it may not recognize what you are referring to. onChange and onSubmit are not functions defined within your component, but rather attributes to <form> and select respectively. Secondly, it is best practice not to reference functions within the state. Create the function outside of the state object and call it to set the desired state changes.
I have initialized the state with the first select option. This won't impact the functionality of your app, but it will enhance the user experience if the default font is not set to Anton.

Furthermore, consider exploring Hooks and Arrow functions. They can simplify your work and streamline your code.

I trust this breakdown sheds light on why your code may not be functioning as intended. Yeet yeet.

export default class Fonts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedFont: "Anton",
      displayedFont: "Anton"
    };
    this.fontHandler = this.fontHandler.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  fontHandler(event) {
    const font = event.target.value;

    this.setState({
      selectedFont: font
    });
  }

  handleSubmit(event) {
    event.preventDefault();

    this.setState(prevState => ({
      displayedFont: prevState.selectedFont
    }));
  }

  render() {
    return (
      <div>
        {console.log(this.state)}
        <form onSubmit={this.handleSubmit}>
          <h1 style={{ fontFamily: this.state.displayedFont }}>Yuh Yeet</h1>
          <select onChange={this.fontHandler}>
            <option value="Anton">Anton</option>
            <option value="Calistoga">Calistoga</option>
            <option value="Fira Sans">Fira Sans</option>
            <option value="Noto Serif">Noto Serif</option>
            <option value="Quicksand">Quicksand</option>
            <option value="Ubuntu">Ubuntu</option>
            <option value="Times New Roman">Times New Roman</option>
            <option value="Titillium Web">Titillium Web</option>
          </select>
          <button type="submit"> Change </button>
        </form>
      </div>
    );
  }
}

Answer 3

Answer №2

Your code has a few issues that need addressing. The select element's onChange attribute should point to the function fontHandler, which will update the state to set the value of current:

<select onChange={this.fontHandler}>
  // ...
</select>

The fontHandler function should look like this:

fontHandler(value){
  this.setState({      
      current: value
  });
}

No need to submit the form.

Answer 4

Your code has a few issues that need addressing. The select element's onChange attribute should point to the function fontHandler, which will update the state to set the value of current:

<select onChange={this.fontHandler}>
  // ...
</select>

The fontHandler function should look like this:

fontHandler(value){
  this.setState({      
      current: value
  });
}

No need to submit the form.

Style selector for dynamic drop-down menus

Answer №1

Answer №2

Similar questions

Expanding the last row to ensure its proper width with flex-grow

Processing made easy with jQuery

Having difficulty showcasing API call results in a Vue.js component

What is the best way to show the initial 20 words on the screen, followed by the next 20 words using

Set default values for input fields based on selected options in php and mysql

What are some strategies I can use to prevent issues with my web design while updating bootstrap?

Vue component failing to display data passed as props

Next.js encountered a surprising conclusion to the JSON input

Setting up an i18n project in AngularJS

Utilize the Google Maps API to align an SVG symbol with the direction of an aircraft's

Creating dynamic CSS in .Net Core using Tag Helpers instead of inline styles

How can I make the columns in Next.js / Tailwind expand horizontally first instead of vertically?

Converting a string to a JSON array with Jackson in RESTful APIs

JavaScript - issue with event relatedTarget not functioning properly when using onClick

What is the best way to make an HTML table with a static header and a scrollable body?

Enhance user experience by implementing a feature in AngularJS that highlights anchor

FullCalendar jQuery caught in an endless loop

Tips for effectively highlighting search text within HTML content without causing any issues

Tips for transferring an MVC model to a UI-bootstrap modal

"One specific div in Safari is having trouble with the external stylesheet, while the other divs are functioning properly- any