Category: React Answers

To update a React Context from inside a child component, we can wrap the React Context provider around the child components.

Then we set the value prop of the context provider to the the state setter function that lets us update the context value.

Then we can use the useContext hook to access the context.

For instance, we write:

import React, { useContext, useState } from "react";

const Context = React.createContext();

const Foo = () => {
  const [, setVal] = useContext(Context);

  return (
    <div>
      <button onClick={() => setVal("foo")}>foo</button>
    </div>
  );
};

const Bar = () => {
  const [, setVal] = useContext(Context);

  return (
    <div>
      <button onClick={() => setVal("bar")}>bar</button>
    </div>
  );
};

export default function App() {
  const [val, setVal] = useState();

  return (
    <Context.Provider value={[val, setVal]}>
      <Foo />
      <Bar />
      <p>{val}</p>
    </Context.Provider>
  );
}

to create the Context context with the React.createContext method.

Next, we create the Foo component which calls the useContext hook with Context to return the value of its value prop.

In both Foo and Bar, we call setVal to set the value of val`.

val and setVal are passed down from the array we set as the value of the value prop of Context.Provider.

Since Foo and Bar are inside Context.Provider we can access the context’s value prop value with useContext.

Therefore, when we click the buttons, we see the val value in App change.

Sometimes, we run into the ‘React eslint error missing in props validation’ when developing a React app.

In this article, we’ll look at how to fix the ‘React eslint error missing in props validation’ when developing a React app.

Fix the ‘React eslint error missing in props validation’ When Developing a React App?

To fix the ‘React eslint error missing in props validation’ when developing a React app, we can set the prop types of the props in the component causing the error.

For instance, we write:

import React from "react";
import PropTypes from "prop-types";

const Foo = ({ someProp, onClick }) => {
  return <div onClick={onClick}>foo {someProp}</div>;
};

Foo.propTypes = {
  someProp: PropTypes.number.isRequired,
  onClick: PropTypes.func.isRequired
};

export default function App() {
  const onClick = () => console.log("clicked");

  return <Foo someProp={2} onClick={onClick} />;
}

to import the prop-types package to let us add prop type validation to the Foo component.

We install it by running:

npm i prop-types

We set the Foo.propTypes property to an object that has the prop names as the keys and the corresponding prop types as the values.

So someProp is a number and it’s required.

And onClick is a function and it’s also required.

Then in App, we render the Foo component with the props passed in.

Now we won’t get any errors from ESLint.

Conclusion

To fix the ‘React eslint error missing in props validation’ when developing a React app, we can set the prop types of the props in the component causing the error.

Sometimes, we want to fix the ‘"JSX not allowed in files with extension ‘ .js’" Error with eslint-config-airbnb when developing a React app.

In this article, we’ll look at how to fix the ‘"JSX not allowed in files with extension ‘ .js’" Error with eslint-config-airbnb when developing a React app.

Fix the ‘"JSX not allowed in files with extension ‘ .js’" Error with eslint-config-airbnb When Developing a React App

To fix the ‘"JSX not allowed in files with extension ‘ .js’" Error with eslint-config-airbnb when developing a React app, we can add the "react/jsx-filename-extension" to allow files with the .js extension to include JSX code in our .eslintrc file.

To do this, we write:

"rules": {
  "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
}

to allow JSX code to be added to files with the .js and .jsx extensions.

Conclusion

To fix the ‘"JSX not allowed in files with extension ‘ .js’" Error with eslint-config-airbnb when developing a React app, we can add the "react/jsx-filename-extension" to allow files with the .js extension to include JSX code in our .eslintrc file.

Sometimes, we want to get the height of an element with React.

In this article, we’ll look at how to get the height of an element with React.

Get the Height of an Element with React

To get the height of an element with React, we can assign a ref to the element we want to get the height for.

Then we can use the clientHeight property to get the height.

For instance, we write:

import React, { useRef } from "react";

export default function App() {
  const elementRef = useRef(null);
  console.log(elementRef.current?.clientHeight);

  return <div ref={elementRef}>hello world</div>;
}

We call the useRef hook and assign the returned ref to elementRef.

Then we set elementRef as the value of the ref prop of the div.

Finally, we log the height of the div by logging elementRef.current?.clientHeight.

Therefore, we should see 18 logged, which is the height of the div in pixels.

Conclusion

To get the height of an element with React, we can assign a ref to the element we want to get the height for.

Then we can use the clientHeight property to get the height.

Sometimes, we want to set body styles within our React app.

In this article, we’ll look at how to set body styles within our React app.

Set Body Styles with React

Within our React component, we can set the body style with plain JavaScript.

For instance, we can write:

componentDidMount(){
  document.body.style.backgroundColor = "green";
}

componentWillUnmount(){
  document.body.style.backgroundColor = null;
}

We set the document.body.style.backgroundColor property to set the background color.

componentDidMount lets us run code when the component mounts.

componentWillUnmount runs when the component unmounts.

Conclusion

Within our React component, we can set the body style with plain JavaScript.