score:0
both ways are correct. but for me, the second way is better because i am using it also code looks cool. you can initialize values in that case just to avoid code breaking and you are not receiving expected values
instead of using the function key wort, it's better to use es6 syntax for functional components.
`export const renderelements = ({
value = 0,
element = <b>hi</b>
}) => {
return (
<!--- code----!>
)
}`
or if you want to return only a single element or object you can use shorter syntax like:
`export const renderelements = ({
value = 0,
element = <b>hi</b>
}) => <!--- code----!>`
score:2
there's no correct way, both ways can acceptable, depending on a case. the difference is that objects (<b>hi</b>
is react element, which is an object) will be same with defaultprops
. this may result in undesirable behaviour if prop values are mutated by a component:
export function renderelements(props) {
let { value, element } = props;
element.props.children = value; // affects all renderelements instances at once
return element;
}
renderelements.defaultprops = {
value: 0,
element: <b>hi</b>
}
this may be not a problem if objects are immutable (react.cloneelement
in case of react element), which is preferable way to do things in react.
Source: stackoverflow.com
Related Query
- which is the correct way while using props in functional component in react
- In React, what is the difference between using functional component and just a function, which returns React node?
- What is the best way to render a search bar component that takes in a props in another component using react v6
- React custom input passing props to parent functional component while using custom hooks
- What is correct way how to create functional component in react using typescript
- How to pass the props to react functional component using react table and typescript?
- What is the correct way of adding a dependency to react in your package.json for a react component
- How to initialize the react functional component state from props
- What is the correct pattern in React JS to invoke a component method on specific props change?
- Which is the right way to detect first render in a react component
- Getting error "Cannot update a component while rendering a different component". What is the correct way to achieve what I'm attempting?
- How to add new props dynamically to the component using navigator in React Native
- Correct way to cancel async axios request in a React functional component
- How to add type FunctionComponent to React functional component using the "function" syntax and not "const"?
- Unmounting a React component the correct way
- A way to display the component once by using localstorage in React
- What is the simplest way to pass state while using React Router?
- How do I test a React component that calls a function on its parent, which changes props on the component?
- Is this the correct way to protect a route in React using hooks?
- How react functional component can use object variable which declared behind the usage? (include example)
- The correct way to unit test react component
- What's the difference between functional component and create component using useMemo() in React
- What is the correct way to handle a key event using useEffect() hook which on the other hand triggers local state changes?
- How do you change the color of a React component using props
- Is there a way to set defaultValues in a child component using react hook form with useFieldArray hook - not using the useForm hook?
- Is there a way to use <Collapse> as my Transition component while using the <Popper> component to display a Menu onHover?
- Props mix when using the same component multiple times on a page in React
- Why doesn't enzymes find() with component props work the same way when using full rendering or shallow rendering?
- How to test the value of the props of react component rendered using react testing library
- What's the redux-react way to manipulate props in react children component
More Query from same tag
- React styled-component: How can I create a background overlay on top image-background css
- Prevent React Route to re-run componentDidMount() on traversing back on same route
- Is there a way to put a paypal script tag inside a button using reactjs?
- Keep having namespacesRequired even if declared
- Accessing JavaScript Array returns "undefined"
- React.createElement: type is invalid on Expo
- Triggering a function in a React parent functional component from its child
- Filter out children of a React component
- onChange on MUI Select is returning the previous value instead of the current
- Many Internal Server Errors
- how to add row to a table using ReactJS on button click
- React Hooks - set state to initial state
- Create a Typescript + React common library
- React create Bootstrap grid of unknown size
- Set loading image for each item between multiple items
- React Idle Timer with BrowserRouter
- Pass prop to nested element in styled component
- How to properly display Firebase Auth error to user using Toast and Typescript?
- What's the best way to do request multiple data from Firebase in React
- How can I have an onclick event in the DataGrid for any Column | React
- Unexpected behaviour : function vs functional component and animations
- How to make Semantic UI react Search use id instead of title as key
- How to update an item in a redux state?
- What are the typings for multi-page or multi-step formik form with React Hooks?
- React - target values from input with component class
- Passing location and pageContext from page to child components in Gatsby
- How to stylize web compoenent inside react app?
- React - issue with useEffect() and axios.get
- Update nested object's property in Redux
- Warning: setState(...): Cannot update during an existing state transition with redux/immutable