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----!>`


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.

Related Query

More Query from same tag