Is Context.Provider and Context.Consumer the same as document.querySelector() in JavaScript?

Question

I would just like to get the text of a div in Home.js when the button is clicked... I've set up createContext();

I've tried using Refs it did not work.. so now I am trying createContext()... In themeContext.js I have a handleChange function that is being passed to Button.js when clicked I'd simply like the text content of a div in Home.js.

live code

Index.js:

import React from "react";
import ReactDOM from "react-dom";
import { ThemeContextProvider } from "./themeContext";

import App from "./App";
const RootElement = document.getElementById("root");

ReactDOM.render(
  <ThemeContextProvider>
    <App />
  </ThemeContextProvider>,
  RootElement
);

themeContext.js:

import React, { Component } from "react";
const { Provider, Consumer } = React.createContext();

class ThemeContextProvider extends Component {
  state = {
    test: "test"
  };

  handleChange = () => {
    this.test.textContent
  };

  render() {
    return (
      <Provider
        value={{ test: this.state.test, handleChange: this.handleChange }}
      >
        {this.props.children}
      </Provider>
    );
  }
}

export { ThemeContextProvider, Consumer as ThemeContextConsumer };

Button.js:

import React from "react";
import { ThemeContextConsumer } from "./themeContext";

export default function Button(props) {
  return (
    <>
      <ThemeContextConsumer>
        {context => <button onClick={context.handleChange}>ooMe</button>}
      </ThemeContextConsumer>
    </>
  );
}

Home.js:

import React from "react";
import { ThemeContextConsumer } from "./themeContext";
import Button from "./Button";

export default function Home(props) {
  return (
    <>
      <ThemeContextConsumer>
        {context => (
          <>
            <div className={context.test}>You Exposed Me!</div>
            <br />
            <h4>
              Button From Test:
              <br />
              <Button handleChange={context.handleChange} />
            </h4>
          </>
        )}
      </ThemeContextConsumer>
    </>
  );
}

App.js

import React from "react";
import "./styles.css";
import Home from "./Home";
import Another from "./Another";

export default function App() {
  return (
    <div className="App">
      <Home />
      <Another />
    </div>
  );
}

Answer 1

If your intent is just getting an element value then you can use refs for that.

 function App() { const divRef = React.useRef(null); function handleClick() { console.log(divRef.current.textContent); } return ( <div> <div ref={divRef} onClick={handleClick}> Foo </div> <Button onClick={handleClick} /> </div> ); } function Button({ onClick }) { return <button onClick={onClick}>Click me</button> } ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://unpkg.com/react@16/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div id="root" />

It is simple when you first check the basic steps for the library you are trying. There are tons of decent documentation.

Also, if you are going to use React, I highly suggest thinking in React way. You are not going to see many codes trying to get an element's value like that.

Answer 2

I used @devserken example above and this solution to come up with thissolution . I used the component names from this example because the component names weren't the focus of what i was trying to learn. My goal was to learn how to grab / capture DOM elements, in this particular case when the button is clicked console log the textContent.

Answer 3

Hey i have updated the link https://codesandbox.io/s/winter-cdn-uqc5c

Basically in react if you want to update the view you need to call

setState

to trigger a re-render

more info: https://reactjs.org/docs/react-component.html#setstate