Ufdjrw

Time travel alters history but people keep saying nothing's changed

Is three citations per paragraph excessive for undergraduate research paper?

Why isn't airport relocation done gradually?

How to manage monthly salary

Landlord wants to switch my lease to a "Land contract" to "get back at the city"

Is flight data recorder erased after every flight?

"as much details as you can remember"

How technical should a Scrum Master be to effectively remove impediments?

Is "plugging out" electronic devices an American expression?

What does ひと匙 mean in this manga and has it been used colloquially?

What did it mean to "align" a radio?

What do hard-Brexiteers want with respect to the Irish border?

Worn-tile Scrabble

A poker game description that does not feel gimmicky

Why was M87 targetted for the Event Horizon Telescope instead of Sagittarius A*?

Does the shape of a die affect the probability of a number being rolled?

Why do UK politicians seemingly ignore opinion polls on Brexit?

Why is the maximum length of OpenWrt’s root password 8 characters?

How to save as into a customized destination on macOS?

For what reasons would an animal species NOT cross a *horizontal* land bridge?

Is there any way to tell whether the shot is going to hit you or not?

Are there any other methods to apply to solving simultaneous equations?

Falsification in Math vs Science

Resizing object distorts it (Illustrator CC 2018)

naming convention for react hooks and props?

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

Component's props names and local state variable names are collide. Is there any naming convention followed globally? See "selected" props and state

function Select(options,selected,onSelect)

 let [selected,setSelect]=useState(selected)

 //... useeffect to update local state if props changes

 function setSelectLocal()
 setSelect(e.target.value)
 onSelect(e.target.value)
 

 return (
 <select onChange=onSelect value=selected>
 options.map((option)=><option>option</option>)
 </select> 
 )

Thanks

reactjs

share|improve this question

asked Mar 8 at 9:43

VimalesanVimalesan

55116

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  check argument "selected" and usestate declaration. Anyway It throws duplicate declaration error. Still If better naming convention may avoid while typing the code
  
  – Vimalesan
  Mar 8 at 9:52
  

  
  
  
  

add a comment | 

0

Component's props names and local state variable names are collide. Is there any naming convention followed globally? See "selected" props and state

function Select(options,selected,onSelect)

 let [selected,setSelect]=useState(selected)

 //... useeffect to update local state if props changes

 function setSelectLocal()
 setSelect(e.target.value)
 onSelect(e.target.value)
 

 return (
 <select onChange=onSelect value=selected>
 options.map((option)=><option>option</option>)
 </select> 
 )

Thanks

reactjs

share|improve this question

asked Mar 8 at 9:43

VimalesanVimalesan

55116

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  check argument "selected" and usestate declaration. Anyway It throws duplicate declaration error. Still If better naming convention may avoid while typing the code
  
  – Vimalesan
  Mar 8 at 9:52
  

  
  
  
  

add a comment | 

Component's props names and local state variable names are collide. Is there any naming convention followed globally? See "selected" props and state

function Select(options,selected,onSelect)

 let [selected,setSelect]=useState(selected)

 //... useeffect to update local state if props changes

 function setSelectLocal()
 setSelect(e.target.value)
 onSelect(e.target.value)
 

 return (
 <select onChange=onSelect value=selected>
 options.map((option)=><option>option</option>)
 </select> 
 )

Thanks

reactjs

share|improve this question

asked Mar 8 at 9:43

VimalesanVimalesan

55116

function Select(options,selected,onSelect)

 let [selected,setSelect]=useState(selected)

 //... useeffect to update local state if props changes

 function setSelectLocal()
 setSelect(e.target.value)
 onSelect(e.target.value)
 

 return (
 <select onChange=onSelect value=selected>
 options.map((option)=><option>option</option>)
 </select> 
 )

share|improve this question

asked Mar 8 at 9:43

VimalesanVimalesan

55116

share|improve this question

asked Mar 8 at 9:43

VimalesanVimalesan

55116

asked Mar 8 at 9:43

VimalesanVimalesan

55116

asked Mar 8 at 9:43

VimalesanVimalesan

55116

1 Answer
1

active

oldest

votes

0

I would say const [selectedValue, setSelectedValue] = useState('default value').

However, what might be a better option is let the parent component handle the state and simply pass down the handler via props.

function ParentComponent() 
 const [selectedValue, setSelectedValue] = useState('default value')

 const onChange = (e) => 
 setSelectedValue(e.target.value)
 

 return (
 <div>
 // other stuff here
 <ChildComponent options=stuff onChange=onChange selectedValue=selectedValue />
 </div>
 )


function ChildComponent( options, onChange, selectedValue ) 
 return (
 <select onChange=onChange value=selectedValue>
 options.map((option)=><option>option</option>)
 </select> 
 )

share|improve this answer

answered Mar 8 at 10:39

Richard VanbergenRichard Vanbergen

867519

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55060496%2fnaming-convention-for-react-hooks-and-props%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

I would say const [selectedValue, setSelectedValue] = useState('default value').

However, what might be a better option is let the parent component handle the state and simply pass down the handler via props.

function ParentComponent() 
 const [selectedValue, setSelectedValue] = useState('default value')

 const onChange = (e) => 
 setSelectedValue(e.target.value)
 

 return (
 <div>
 // other stuff here
 <ChildComponent options=stuff onChange=onChange selectedValue=selectedValue />
 </div>
 )


function ChildComponent( options, onChange, selectedValue ) 
 return (
 <select onChange=onChange value=selectedValue>
 options.map((option)=><option>option</option>)
 </select> 
 )

share|improve this answer

answered Mar 8 at 10:39

Richard VanbergenRichard Vanbergen

867519

add a comment | 

0

I would say const [selectedValue, setSelectedValue] = useState('default value').

However, what might be a better option is let the parent component handle the state and simply pass down the handler via props.

function ParentComponent() 
 const [selectedValue, setSelectedValue] = useState('default value')

 const onChange = (e) => 
 setSelectedValue(e.target.value)
 

 return (
 <div>
 // other stuff here
 <ChildComponent options=stuff onChange=onChange selectedValue=selectedValue />
 </div>
 )


function ChildComponent( options, onChange, selectedValue ) 
 return (
 <select onChange=onChange value=selectedValue>
 options.map((option)=><option>option</option>)
 </select> 
 )

share|improve this answer

answered Mar 8 at 10:39

Richard VanbergenRichard Vanbergen

867519

add a comment | 

I would say const [selectedValue, setSelectedValue] = useState('default value').

However, what might be a better option is let the parent component handle the state and simply pass down the handler via props.

function ParentComponent() 
 const [selectedValue, setSelectedValue] = useState('default value')

 const onChange = (e) => 
 setSelectedValue(e.target.value)
 

 return (
 <div>
 // other stuff here
 <ChildComponent options=stuff onChange=onChange selectedValue=selectedValue />
 </div>
 )


function ChildComponent( options, onChange, selectedValue ) 
 return (
 <select onChange=onChange value=selectedValue>
 options.map((option)=><option>option</option>)
 </select> 
 )

share|improve this answer

answered Mar 8 at 10:39

Richard VanbergenRichard Vanbergen

867519

function ParentComponent() 
 const [selectedValue, setSelectedValue] = useState('default value')

 const onChange = (e) => 
 setSelectedValue(e.target.value)
 

 return (
 <div>
 // other stuff here
 <ChildComponent options=stuff onChange=onChange selectedValue=selectedValue />
 </div>
 )


function ChildComponent( options, onChange, selectedValue ) 
 return (
 <select onChange=onChange value=selectedValue>
 options.map((option)=><option>option</option>)
 </select> 
 )

share|improve this answer

answered Mar 8 at 10:39

Richard VanbergenRichard Vanbergen

867519

answered Mar 8 at 10:39

Richard VanbergenRichard Vanbergen

867519

answered Mar 8 at 10:39

Richard VanbergenRichard Vanbergen

867519