React Tips — Context, Hover, and Input Fields
Tags: react, webdev, beginners, productivity
Published: 2020-10-19 00:55:24

---
title: React Tips — Context, Hover, and Input Fields
published: true
date: 2020-07-28 23:42:15 UTC
tags: react,webdev,beginner,productivity
canonical_url: https://thewebdev.info/2020/07/28/react-tips%e2%80%8a-%e2%80%8acontext-hover-and-input-fields/?utm_source=rss&utm_medium=rss&utm_campaign=react-tips%25e2%2580%258a-%25e2%2580%258acontext-hover-and-input-fields
---

**Check out my books on Amazon at https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62**

**Subscribe to my email list now at http://jauyeung.net/subscribe/**

React is a popular library for creating web apps and mobile apps.

In this article, we’ll look at some tips for writing better React apps.

### Get the Value of an Input Field Using React

To get the value of an input field with React, first, we set the inputted value to a state.

Then we get the latest value from the state.

For instance, we can write:

```
class InputForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      val: ''
    };
  }

  render() {
    return (
      //...
      <input value={this.state.val} onChange={evt => this.updateInputValue(evt)}/>
      //...
    );
  },

  updateInputValue(evt) {
    this.setState({
      val: evt.target.value
    });
  }
});

```

We created the `updateInputValue` method which calls `setState` to set the value of the input field as the value of the `val` state.

Then we pass that into the `onChange` prop.

The `value` prop has the `this.state.val` which we set.

With function components, we use the `useState` hook to set the value and retrieve it.

For instance, we can write:

```
import { useState } from 'react';

function InputForm() {
  const [val, setVal] = useState('');

  return (
    <div>
      <input value={val} onInput={e => setVal(e.target.value)}/>
    </div>
  );
}

```

We called the `useState` function with the initial value of the input.

Then we passed a function to the `onInput` prop to run it to set the value to the `val` state when whenever something is entered.

Then we get the latest inputted value with the `val` variable.

### Pass Form Element State to Sibling or Parent Elements

To most versatile way to pass data between element is to us the context APU.

For instance, we can write:

```
import React, { useState, useContext } from "react";
import ReactDOM from "react-dom";

const Context = React.createContext(null);

const initialAppState = {};

function App() {
  const [appState, updateAppState] = useState(initialAppState);

return (
    <div>
      <Context.Provider value={{ appState, updateAppState }}>
        <Comment />
      </Context.Provider>
    </div>
  );
}

function Comment() {
  const { appState, updateAppState } = useContext(Context);

  function handleCommentChange(e) {
    updateAppState({ ...appState, comment: e.target.value });
  }

  return (
    <div className="book">
      <input
        type="text"
        value={appState.comment}
        onChange={handleCommentChange}
      />
      <br />
      <div>
        <pre>{JSON.stringify(appState, null, 2)}</pre>
      </div>
    </div>
  );
}

```

We created the context with the `React.createContext` method to create the context.

Then in `App`, we add the `Context.Provider` so that all the child elements can have access to the context.

Then we created the `Comment` component which calls the `useContext` hook to use our `Context` context. In the component, we have an input to change the `appState` as we enter something. This will be reflected in all components that use the context.

We can see what we entered in the stringified JSON that’s below the input.

### How to Implement a:hover with Inline CSS Styles in React

We can listen to the `mouseenter` and `mouseleave` events to create an effect for hover.

For instance, we can write:

```
class Foo extends React.Component {
  constructor() {
    this.state = { hover: false };
  }

  toggleHover(){
    this.setState({ hover: !this.state.hover })
  },

  render() {
    let linkStyle;
    if (this.state.hover) {
      linkStyle = { backgroundColor: 'red' }
    } else {
      linkStyle = { backgroundColor: 'green' }
    }
    return(
      <div>
        <a style={linkStyle} onMouseEnter={this.toggleHover} onMouseLeave={this.toggleHover}>Link</a>
      </div>
    )
  }
}

```

We created our component by adding a `a` element that listens to the `mouseenter` and `mouseleave` events by passing methods to the `onMpuseEnter` and `onMouseLeave` props.

The `toggleHover` method toggles the `hover` state between `true` and `false` .

Then in the `render` method, we set the `backgroundColor` property depending on the truth value of the `hover` state.

Also, we can use the style-it library which lets us embed CSS with pseudoclasses into our React components.

We install it by running:

```
npm install style-it --save

```

Then we can write:

```
import React from 'react';
import Style from 'style-it';

class Foo extends React.Component {
  render() {
    return Style.it(`
      p:hover {
        color: red;
      }
    `,
      <p>hover me</p>
    );
  }
}

```

Then we use the `Style.it` tag from the style-it library to let us set the hover state of our element.

We can also use the `Style` component to do the same thing.

For instance, we can write:

```
import React from 'react';
import Style from 'style-it';

class Foo extends React.Component {
  render() {
    return (
      <Style>
        {`
          p:hover {
            color: red;
          }
        `}
        <p>hover me</p>
      </Style>
    );
  }
}

```

We use the `Style` component and embed our CSS with the hover pseudoclass in the string.

Then we’ll see a color change when we hover over the p element.

### Conclusion

We can use a library or plain JavaScript to create a hover effect.

There are various ways to get input field values and pass data around multiple components.

The post [React Tips — Context, Hover, and Input Fields](https://thewebdev.info/2020/07/28/react-tips%e2%80%8a-%e2%80%8acontext-hover-and-input-fields/) appeared first on [The Web Dev](https://thewebdev.info).