Need help importing a variable from a components file to an app.js file(React)-CodePudding

Super rookie question. So I'm making this little click game that allows you to change the number displayed on the home page with button clicks.

Here's the component file I want to export the Result var from.

import React from "react";
import "./Wrapper.css";



const Wrapper = (props) => {

    var Result = 0;
    
  function addCount() {
    Result  ;

    console.log("increased");
    console.log(Result);
  }

  function subtractCount() {
    Result--;

    console.log("decreased");
    console.log(Result);
  }

  return (
    <div className="wrapper">
      {props.children}
      <button className="btn btn--alt" onClick={addCount}>
         
      </button>
      <button className="btn" onClick={subtractCount}>
        -
      </button>
    </div>
  );
};

export default Wrapper;

===

And here's the app.js file I want that same var imported to so it can fielded into the element with this.state.

import React, { Component } from "react";
import Wrapper from "./components/Wrapper";
import Title from "./components/Title";
import Count from "./components/Count";
import "./App.css";

class App extends Component {
  state = {
    CountNum: 0,
  };

  render() {
    return (
      <Wrapper>
        <Title>Click Counter</Title>
        <Title>Count:</Title>
        <Count>{this.state.CountNum}</Count>
      </Wrapper>
    );
  }
}

export default App;

I thought it would get picked up automatically but no luck.

CodePudding user response：

I strongly suggest you to put your Result in parent component's state Then pass the necessary setState functions to child component

It is more react way.

Simply create a function that updates the state 'result' in parent then pass those functions to child component and execute when needed

CodePudding user response：

And by the way, You should not use var variable. Better to use let / const variables. When use let or const?

Let if you want to change its value in the future. Your example for a variable is "Result".

Const if you do not change the variable by reassigning it.

Have a good coding! :)

CodePudding user response：

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

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  render() {
    console.log(this.state.count);
    return (
      <div className="App">
        <Wrapper
          count={this.state.count}
          onChangeCount={(count) => this.setState({ count })}
        />
      </div>
    );
  }
}

const Wrapper = (props) => {
  return (
    <div>
      <button onClick={() => props.onChangeCount(props.count   1)}> </button>{" "}
      <span>{props.count}</span>{" "}
      <button onClick={() => props.onChangeCount(props.count - 1)}> - </button>
    </div>
  );
};

You can use this idea for your application. Just pass the count & function as props and update the state from inside the wrapper component

CodePudding user response：

You can pass the CountNum as a prop and also a function to update it (eg. setCountNum). Also you need to replace var Result = 0; with var Result = props.setCountNum; or CountNum value will become 0 again on each render. Here's an example.

In App.js:

import React, { Component } from "react";
import Wrapper from "./components/Wrapper";
import Title from "./components/Title";
import Count from "./components/Count";
import "./App.css";

class App extends Component {
  state = {
    CountNum: 0,
  };

 setCountNum = (val) => {
   this.setState({CountNum: val})
 }

  render() {
    return (
      <Wrapper setCountNum={this.setCountNum} CountNum={this.state.CountNum}>
        <Title>Click Counter</Title>
        <Title>Count:</Title>
        <Count>{this.state.CountNum}</Count>
      </Wrapper>
    );
  }
}

export default App;

Your Component:

import React from "react";


export const Wrapper = (props) => {

    var Result = props.CountNum;
    
  function addCount() {
    Result  ;

    console.log("increased");
    console.log(Result);
    props.setCountNum(Result)
  }

  function subtractCount() {
    Result--;

    console.log("decreased");
    console.log(Result);
    props.setCountNum(Result)

  }

  return (
    <div className="wrapper">
      {props.children}
      <button className="btn btn--alt" onClick={addCount}>
         
      </button>
      <button className="btn" onClick={subtractCount}>
        -
      </button>
    </div>
  )}

Also if you want, you can update the structure of your code and have all the states in one component only.

CodePudding user response：

Full functional component example. Feel free to ask :)


import React from "react";
import {useState} from "react";
import "./styles.css";

export default function App () {
  //CountNum initial value is set to 0; setCountNum is function that updates the CountNum values;
  const [CountNum, setCountNum] = useState(0);
  
  return (
    <div>
      {/* setCountNum is being passed from the parent component App to the child component Wrapper */}
      <Wrapper setCountNum={setCountNum}/>
      {/*if the counter changes this would update*/}
      {CountNum}
    </div>
  )
}

//{setCountNum} is the same as props.setCountNum; props is a default naming for a argument in React
//export default function Wrapper(props){...} if you did this you would have to call props.setCountNum() 
//export default function Wrapper( {setCountNum} ) if you did this you would have to call setCountNum() "(destructuring objects) "
//However, if you want to call the function you would have to call props.setCountNum() instead of setCountNum()
export default function Wrapper( {setCountNum} ) {
  const incremFunc = () => {
    setCountNum(previousValue => previousValue   1)
  } 
  const decremFun = () => {
    setCountNum(previousValue => previousValue - 1)
  }
  return (
    <div>
      <button onClick={incremFunc}>Increment</button>
      <button onClick={decremFun}>Decrement</button>
    </div>
  )
}