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

Unusual Conduct when Interacting with ContentEditable Text

Using Array.push within a promise chain can produce unexpected results

Struggling with implementing Mobile Navigation menu

Using setTimeout or setInterval for polling in JavaScript can cause the browser to freeze due to its asynchronous

embedding HTML code directly into an iframe

Mapping arguments as function values

After changing pages, the checkbox's state is reset to empty

Accessing instance variables from a chained observable function in Angular 2/Typescript

Implementing the Delete feature using AJAX in this specific scenario: What is the best approach?

Tips for styling tooltips in rc-slider

Can you tell me the specific location in the CSS where this logo image is defined?

Utilize PHP's file_get_contents to trigger the Google Analytics tracking pixel

Pause until the array is populated before displaying the components

Empty Canvas: Google Charts Graph Fails to Populate

Step-by-step guide to selecting a specific point on an HTML5 canvas using Python's selenium webdriver

Here's a unique version: "Strategies for effectively closing a modal when moving to a

Using Blob to save CSV file on Safari

Using functions like nl2br() for new line breaks, preg_replace for replacing patterns, htmlspecialchars() for encoding special

Automatically Modify Uploaded Files on the Server

Incorporate Margins for Table Cells in Outlook (HTML Email)