score:0
a few things, avoid doing stuff like this when using react
let element = document.createelement("div");
element.setattribute("id", "happimodal");
element.classlist.add("happicontainer");
also you can't use const [apires, setapires] = usestate({});
outside a component
also you can't use reactdom.render inside a component
here's some code that kind of does what you want, but i took out a few node modules
import react, { usestate, useeffect } from "react";
import reactdom from "react-dom";
import { motion } from "framer-motion";
import axios from "axios";
import objectpath from "object-path";
// definimos la animacion entrante y saliente
const happianim = {
show: {
y: 0
},
hide: {
y: 200
}
};
// componente de react
function compo(props) {
const [loaded, setloaded] = usestate(false); // variable inicial
const [show, setshow] = usestate(false); // mostrar u ocultar componente
const [data, setdata] = usestate({ name: "hola" }); // data inicial
const [load, setload] = usestate(false);
const [apistatus, setapistatus] = usestate("loading"); // status de la llamada
// cargamos la data inicial
useeffect(() => {
if (!loaded) {
if (props.config) {
setdata(props.config);
}
setloaded(true);
setshow(true);
// minimo de tiempo de carga para animacion de loading definida aqui
settimeout(() => {
setload(true);
}, 700);
// mostramos data cargada
const config = {
headers: {
"content-type": "application/json"
}
};
if (props.method === "post") {
axios
.post(props.url, props.data, config)
.then((res) => {
setdata({
status: res.status,
message: objectpath.get(res, props.rselector),
response: res
});
ocultarmodal(objectpath.get(res, props.rselector), res.status);
props.storage(res);
})
.catch((err) => {
setdata({
status: err.status,
message: err.message,
response: err
});
});
} else {
axios
.get(props.url)
.then((res) => {
setdata({
status: res.status,
message: objectpath.get(res, props.rselector),
response: res
});
ocultarmodal(objectpath.get(res, props.rselector), res.status);
props.storage(res);
})
.catch((err) => {
setdata({
status: err.status,
message: err.message,
response: err
});
});
}
const ocultarmodal = (message, status) => {
setapistatus(status);
// medimos el string para calcular el tiempo de muestra del modal
let len = message.length;
// ocultamos
settimeout(() => {
setshow(false);
}, len * 50);
// ocultamos
settimeout(() => {
document.getelementbyid("happimodal").remove();
}, len * 51);
};
}
});
return (
<motion.div
variants={happianim}
initial="hide"
animate={loaded && show ? "show" : "hide"}
classname="happimodal"
>
<div classname="happimodal__iconcontainer">
{apistatus !== "loading" && load ? (
data.message
) : (
<p>there would be a clip loader here </p>
)}
</div>
</motion.div>
);
}
// funcion inicial
const happi = (
url,
responseselector = "data",
storage,
data = {},
method = "get"
) => {
return (
<div id="happimodal" classname="happicontainer">
<compo
url={url}
data={data}
method={method}
rselector={responseselector}
storage={storage}
/>
</div>
);
};
const rootelement = document.getelementbyid("root");
reactdom.render(<happi />, rootelement);
you can see the code on codesandbox, start a new sandbox to see a hello world react program with reactdom in the right place. i put it all in one file in this example to match your code more closely
Source: stackoverflow.com
Related Query
- How to change variable value in return of render with reactjs?
- With React, how to access the render return value of a child component
- how to change jest mock function return value in each test?
- How do I fix "Expected to return a value at the end of arrow function" warning?
- how to render a react component using ReactDOM Render
- How to add comment inside the return statement in render function?
- How to fix "Expected to return a value in arrow function" with reactjs?
- How to return an empty jsx element from the render function in react?
- How use async return value from useEffect as default value in useState?
- { React jsx babel es6 webpack } How Can I Comment in render ( return ( // || /**/ ) )?
- How fix this warrning warning Array.prototype.map() expects a return value from arrow function array-callback-return?
- Redux Toolkit w/ TypeScript: how can I properly type the return value from an async thunk
- How do we return a Promise from a store.dispatch in Redux - saga so that we can wait for the resolve and then render in SSR?
- How can I export the type of an Action creators return value using Flow?
- React - How to return one of several components in the render function?
- How to fix 'Expected the return value to be a 31-bit integer' error react hooks
- How can a function value is displayed in a HTML tag with a return value from addEventListerner click?
- React: How to pass State value to another component and use it to render a component
- how to render components based on the value of props?
- React How to return div and variable value for another component
- How can I render API data into separate tables based on the value in React?
- How can I check the return value of dispatch in redux hook
- ESLint Rule on React Component: Method Render expected no return value
- How to assign return of async value to initial state of reducer?
- how could i return the value inside of a foreach javascript
- reactjs - How to render a component which render return a component?
- How to render component as soon as the value stored in local in React
- How to assign API return value to state?
- How to render default value in ant design checkbox using boolean?
- How to test a return value of a mock function in jest
More Query from same tag
- Is there a way to toggle attributes from any columns in a react bootstrap table?
- map in array object with index of other map parameter
- reactjs call a function continuosly after recieving callback
- Cannot read property 'then' of undefined on Redux thunk action
- Function Doesn't Execute When Passed to Functional Component
- React component not rerender on state change
- How to redirect the application to home page when refreshing the browser?
- How to resolve "Expected 0 type arguments, but got 1" error on TypeScript React Hook useState()?
- A Tabs Component of React
- How can I display GIF images efficiently in my Gatsby blog website?
- How to decide when to rerender in React
- Next Js Typescript getting error TS2304: Cannot find name 'AppProps'
- Table head keeps displaying it's content instead of just once on fetch
- Loading Google script in React Component
- Can't display image from Strapi in ReactJS (frontend)
- Array inside an Object with Dynamic Key in Redux
- ReactJS Update or Remove item in arrayList
- React.JS, how to edit the response of a first API call with data from a second API call?
- Type Property Relying on Return Type of Another Property
- Cache external images on webserver
- React Searchbar. CanĀ“t select data from API
- CRA - React production build with dynamic CSS imports
- React-Spring: Trail inside UseTransition map not working
- React - Material-ui : Autocomplete on words that aren't the first in a sentence
- React - JS move property inside an array as a main property
- Two way binding between React components
- Trying to add google fonts to a react / neutrino project
- Uncaught Error: Objects are not valid as a React child (found: object with keys {product})
- Conditional Rendering Inside A Function
- How does the React component's state changes by using [event.target.name]?