如何将 useState 挂钩的 state 设置为 true

Question

here I am using useState to set the state 'uneligible' to false as a start

    const [state,setState] = React.useState({
   
    uneligible: false,
  
  })

then here I am writing a function to set the state to true and here's where I am getting the error:

 function setEligibility(){state.uneligible==='true'}

and that's the error:

and here's the condition for setting it to true(if age of user< 18 state should be true):

 var split_dob = dateOfBirth.split("-");
    var month = split_dob[1];
var day = split_dob[2];
var year = split_dob[0];
var dob_asdate = new Date(year, month, day);
var today = new Date();
var mili_dif = Math.abs(today.getTime() - dob_asdate.getTime());
var age = (mili_dif / (1000 * 3600 * 24 * 365.25));
console.log(age);
if(age<18){setEligibility();}

and that's how I will call it to show the alert component if the state is successfully set to true(if user's age <18):

 <Grid item xs={8} style={{marginTop:"10px"}}>{state.uneligible&&<Alert variant="filled" severity="error">
  This is an error alert — check it out!
</Alert>}</Grid>
                   

I need help to fix the error and make the alert component appear

Answer 1

You don't need to make a function to change state

const [eligible,setEligible] = React.useState(
false  // default value
)

To Update State state

setEligible(true)

Answer 2

I get the impression that you read two different react approaches and mixed them in your code: the old class-based (without hooks but with an explicit state), and the hook based. With hooks you don't really have a state, and as Fahad pointed out you can just set individual (state-)variables directly. If you want to keep with the object you've got, you'd do:

function setEligibility() { 
   setState({uneligible: true});
}

Answer 3

The state.uneligible==='true' is a condition, instead of assignment.

You should change the below line:

function setEligibility(){state.uneligible==='true'}

to

function setEligibility(){state.uneligible = 'true'}

Answer 4

You are declaring the state variable name as state which is not a good practice and might throw a keyword error as well. Instead, use the variable name as eligible.

Define the state like this:

const [uneligible, setUneligible] = React.useState(false);

Condition for setting it would change to this:

var split_dob = dateOfBirth.split('-');
var dob_asdate = new Date(split_dob[0], split_dob[1], split_dob[2]);
var today = new Date();
var mili_dif = Math.abs(today.getTime() - dob_asdate.getTime());
var age = mili_dif / (1000 * 3600 * 24 * 365.25);
if (age < 18) {
  setUneligible(true);
}

If Uneligibile is set to false, you are rendering an empty Grid which does not seem to be okay. Rather:

if (uneligible) {
  return (
    <Grid item xs={8} style={{ marginTop: '10px' }}>
      <Alert variant="filled" severity="error">
        This is an error alert — check it out!
      </Alert>
    </Grid>
  );
} else {
  return null;
}