I Have 2 modules once known as App and another where I create exportable variables, in one of the exportable variables i want it to change the state inside of App. please advice me it will be much appreciated.
import "./styles.css";
import {submit} from "./ex"
export default function App() {
const [loading,notLoading] = ("false")
return (
<div className="App">
<button onClick={submit}> click me </button>
</div>
);
}
// Exportable module ex.js
const objectFunc = (data) => {
return dummy(data)
}
const dummy = (e) => {
if(e === "k") {
poster(e)
} else {
console.log("failed")
}
}
const poster = (e) => {
// need to update state from this function
console.log(e,"posted")
}
// submit function - called when submitted.
export const submit = (e) => {
objectFunc("ek")
}
there's a few things wrong here, first thing inside the App component, I assume you meant to use useState with a variable called false, now to your question, it's not really advised to separate functions that are not pure from the component, since it needs to manipulate the state, you could put it inside the app component, but just to solve your problem, have a look at this new code:
App.js
import "./styles.css";
import { submit } from "./ex";
import { useState } from "react";
export default function App() {
const [loading, setLoading] = useState(false);
return (
<div className="App">
<button onClick={(e) => submit(e, setLoading)}> click me </button>
{loading && <div>loading</div>}
</div>
);
}
ex.js
const objectFunc = (data, setLoading) => {
return dummy(data, setLoading);
};
const dummy = (e, setLoading) => {
poster(e, setLoading);
if (e === "k") {
} else {
console.log("failed");
}
};
const poster = (e, setLoading) => {
// need to update state from this function
console.log(e, "posted");
setTimeout(() => setLoading(false), 1000);
};
// submit function - called when submitted.
export const submit = (e, setLoading) => {
setLoading(true);
objectFunc("ek", setLoading);
};
What I did was pass the callback function down all the functions that used it, again, not really advised, but this should solve your issue
(p.s just added the timeout to show the loading changes)
const objectFunc = (data, setExample) => {
return dummy(data, setExample);
};
const dummy = (e, setExample) => {
if (e === "e") {
poster(e, setExample);
} else {
setExample(false);
console.log("failed");
}
};
const poster = (e, setExample) => {
console.log(e, "posted");
setExample(true);
};
export const submit = (e, setExample) => {
setExample(true);
objectFunc("ek", setExample);
};
import { useState } from "react";
import { submit } from "./global";
import "./styles.css";
export default function App() {
const [example, setExample] = useState(false);
return (
<div className="App">
<button onClick={(e) => submit(e, setExample)}> click me </button>
<div className="test">
{example ? <span>Data is Here!!!!</span> : <span>No Data Show :(</span>}
</div>
</div>
);
}
.test { margin-top: 1rem; }
I hope it works for you :)
You can pass some function which set the state as callback function, similar to
const objectFunc = (data, callback) => {
return dummy(data, callback);
};
const dummy = (e, callback) => {
if (e === "k") {
poster(e, callback);
} else {
console.log("failed");
}
};
const poster = (e, callback) => {
// need to update state from this function
console.log(e, "posted");
let somevalue = "value";
callback(somevalue);
};
// submit function - called when submitted.
export const submit = (e, callback) => {
objectFunc("ek", callback);
};
App.js
import { submit } from "./ex";
import { useState } from "react";
export default function App() {
const [st1, setSt1] = useState(1);
const setState1 = (value) => {
setSt1(value);
};
return (
<div className="App">
<button onClick={(event) => submit(event, setState1)}> click me </button>
<div>{st1}</div>
</div>
);
}