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 renderaccount
changed to uppercase asAccount
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