I got an input on another component, I want to pass the value of input on account() when changing value to the constant setSales which is on sales_add(). How would I do that? What is the efficient way of passing the data between components? Where am I wrong? Is my question possible on achieving it? if its possible, Is it recommended or bad practice? Sorry completely newbie on reactjs.

Sales Add component

export default function sales_add() {

    const [Sales, setSales] = useState("")

    render(
        <h1>{console.log(Sales)}</h1>
    )
}

Account component

import SalesAdd from "pages/Sales-Add/index";

export default function account (){
    const onchangeValue = async (e) => {
        const response = SalesAdd.setSales(e.target.value)
    }
    render(
        <Input type="text" className="form-control" onChange={(e) => { onchange(e) }}/>
    )
}

CodePudding user response：

Your Que is not clear but i think you want to do this ->

import SalesAdd from "pages/Sales-Add/index";

export default function account (){
    const onchangeValue = async (e) => {
        const response = SalesAdd.setSales(e.target.value)
    }
    render(
        <Input type="text" className="form-control" onChange={onchangeValue}/>
    )
}

CodePudding user response：

Its not quite clear what you are trying to achieve. sales_add has been defined as a function, but has a render function defined in it with no return statement. sales_add looks like its being used as a functional component, and this needs a return statement. render belongs to class based components. see here for more info.

As I understand, you would like to pass a value to the sales_add() function, keep state, and log that state to console when it changes.

You have the definition of a Custom Hook

You can achieve this with slight modifications.

First, for sales_add, instead of using render which belongs to a Class based component, return the function used to set the sales value.

export default function sales_add() {

    const [Sales, setSales] = useState("")

      return setSales; //return setSales which is used to mutate the value of Sales
    }

Now, if you want to log to the console every time Sales changes, we can set up a useEffect to watch Sales and do something when it changes. It is also good practice to prefix your custom hooks with 'use'. This will change your sales_add custom hook name to useSalesAdd

export default function useSalesAdd() {

    const [Sales, setSales] = useState("")

    useEffect(() => {
      console.log(Sales)
    },[Sales]) //sales in the dependency array of the useEffect

      return setSales; //return setSales which is used to manipulate the value of Sales
    }

our Custom Hook looks good. So now we use it.

import useSalesAdd from "pages/Sales-Add/index";

export default function Account(){
    const setSales = useSalesAdd(); //this gets the setSales function from the custom hook!
    const onchangeValue = async (e) => {
        setSales(e.target.value) //use the function from your custom hook
    }
    return(
        <Input type="text" className="form-control" onChange={(e) => { onchange(e) }}/>
    )
}

Note how in the account function,

• Changed the name of the function to start with an upper case letter, which is good practice for functional components
• Changes the render to a return, which is the correct statement for a functional component. (functional components return JSX)

to recap:

• sales_add was converted to a custom hook, useSalesAdd with a return instead of a render
• account changed to uppercase as Account with return instead of render, which is correct for functional components

CodePudding user response：

Pass the data through component. If they are on same parent component it would be like this.

export default function account ({setState}){
    render(
        <Input type="text" className="form-control" onChange={(e) => 
        setState(e.target.value) }/>
    )
}

export default function sales_add({inputValue}) {
    render(
        <h1>{inputValue}</h1>
    )
}

Parent component

export default function Parent() {
    const [state,setState] = useState("");
    render(
        <Sales_ADD inputValue={state}/>
        <Account setState={setState}/>
    )
}

It will work if they are components and have same parent component, from where you can pass data. As it looks like next js structure, I would suggest using a single page, where you can load these two components. If you need to keep them in seperate pages, then you need to use state management tools such as context api or redux