You passed a container to the second argument of root.render(...). You don't need to pass it again since you already passed it to create the root.
I had the same problem when i went to React 18 :
const root = ReactDOM.createRoot(
document.getElementById('root')
);
root.render(
<React.StrictMode>
<App/>
</React.StrictMode>,
document.getElementById("root")
);
The browser put an error.
You can remove it by deleting the last line in the root.render():
document.getElementById("root")
Related
I have the code below but for some reason the variable is not declared inside the returned code(it says underscore in vs code) and before the return code the variable is declared well. Why is that?
export default function App() {
{const age = 18} // This code work
return (
<Text>Open up App.js to start working on your app!</Text>
{const name = "Mike"} // This code doesn't work
<StatusBar style="auto" />
)
}
According to the React Docs, everything inside {} in JSX must be a valid JavaScript expression. The statement const name = 'Mike' is not an expression since it does not resolve to a value.
I am using this library: https://github.com/gitim/react-native-sortable-list ("react-native-sortable-list": "0.0.24") which does not have a type definition so I use:
"#types/react-native-sortable-list": "^0.0.9".
I have the following component defined in a tsx file (typescript):
import SortableList from 'react-native-sortable-list'
import ....// others
interface Props {
tasks: ITask[]
}
export default function TasksList(props: Props) {
return (
<SortableList
data={props.tasks}
renderRow={({ active, data, disabled, index, key }) => {
return (
<View key={key}>
<Text>{data.name}</Text>
</View>
)
}}
/>
)
}
The code works (the list gets rendered fine) but I get a Typescript error:
JSX element class does not support attributes because it does not have a 'props' property.ts(2607)
'SortableList' cannot be used as a JSX component.
Its instance type 'SortableList<unknown, unknown>' is not a valid JSX element.
Type 'SortableList<unknown, unknown>' is missing the following properties from type 'ElementClass': render, context, setState, forceUpdate, and 3 more.ts(2786)
I don't know how to make the error go away. Any idea?
I found out that Visual Studio Code had Typescript version 4.1.5. Once I changed it to 3.9.9 the error message was gone!
I'm trying to handle a form composed by two parts, one fixed and the other one that gets displayed by a switch.
To handle the forms I'm using react-hook-form.
I defined a validation scheme in the file validation.ts inside the constants folder.
About the optional part I defined a sub-object but it doesn't work and it gives a compile time error.
Because of this I opted for the solution you'll find in the link at the bottom of the page
Although I defined the optional input fields inside the validation file, they don't get recognized when I press the submit button.
How can I fix this problem?
At this link you can find a working example of the problem.
The main problem is with your components/Form component, it has this line
// components/Form.tsx
return child.props.name
? .... : child;
What you have done here is ignoring all child components without the name prop,
where as when rendering the component what you did was rendered them inside <></>, use below alternative instead.
// in App.tsx
{isEnabled ? <Input name="trailerPlate" placeholder="Targa rimorchio" /> : <></>}
{isEnabled ? <Input name="trailerEnrolment" placeholder="Immatricolazione rimorchio" /> : <></>}
Still the validation won't because you need to register the components and your current useEffect code doesn't account for change in number of input fields.
Use below code instead
React.useEffect(() => {
....
....
}, [
register,
Array.isArray(children) ?
children.filter(child => child.props.name).length : 0
]
);
We are using the count of child components with name prop as a trigger for useEffect.
And finally you also have to unregister the fields when you toggle the switch,
below is a sample code, feel free to change it according to your preference.
const { handleSubmit, register, setValue, errors, unregister, clearErrors } = useForm<VehicleForm>();
const toggleSwitch = () => {
if (isEnabled) {
unregister('trailerEnrolment');
unregister('trailerPlate');
}
clearErrors();
setIsEnabled(prev => !prev)
};
Feel free to upvote if I was helpful.
I've narrowed this down to find that the error occurs only when I try to pass the <Moment /> component as described in the React-Moment documentation. So far, I haven't found any explanations specific to this package and hope someone out there has had a similar issue!
The docs spell out a usage like this:
import Moment from 'react-moment';
// then within the class component:
return (
const dateToFormat = '1976-04-19T12:59-0500';
<Moment>{dateToFormat}</Moment>
);
And I'd like to take a raw date string like this:
<Text>Created {this.props.postDate}</Text>
which is stored thusly: "postDate": "2019-01-31T04:13:31.224Z"
but so far, anytime I add <Moment>{this.props.postDate}</Moment>, whether that be outside of or inside of the existing <Text /> block I get red:
It's in the documentation:
https://github.com/headzoo/react-moment#usage-with-react-native
<Moment element={Text}>{dateToFormat}</Moment>
My Question i have two Scene OnceScene and TwoScene I want to Navigate from OnceScene to TwoScene and at the same time i want to pass some array from 1st the 2nd so for that i have written the below code
this.props.navigator.push({
id: "productdetails",
passProps: {arr: arr[rowID]}
});
you can see i am passing the array in passProps but how can i acess that array in TwoScene Its seems simple but since i am new i dont have much idea.
Have you tried using react-native router?
https://github.com/aksonov/react-native-router-flux
Also answering to your question it seems like you are passing the data through props. So on the next screen you can access these props like: this.props.foo (of course you need to declare it on the second screen somehow to access it.)
I found what i was missing ,forgot to declare
return (<ProductDetails title="ProductDetails"
navigator={navigator}
{...route.passProps} route={route}
/>)
on my return component. This is the reason i was getting undefined value.