How to show content when click on button-CodePudding

I have a button that I would like when the user clicks on it to show what is inside my MaterialTextField. Inside my materialtextfield's there is: value={projectFilter.eventName}, {projectFilter.eventYear}, and others that follow the same logic. How can I make it so that I have this result?

UPDATE(here some example of what I want to show when I click the button):

return (
<Grid item xs={4}>

            <MaterialTextField

              autoComplete="off"
              variant="outlined"
              label="Name"
              type="text"
              name="eventName"
              value={projectFilter.eventName}
              sx={{ width: '100%' }}
            />
          </Grid>
)

CodePudding user response：

Please provide some code sample.

Basically you have to set state which will change when user clicks the button.

https://reactjs.org/docs/state-and-lifecycle.html

CodePudding user response：

You need state to store the current value of the field. You can use the useState hook for this. You should really read through the React documentation. The useState hook docs in particular is what you are after but it will make much more sense if you read state and lifecycle and just understand how react works.

Here is an example assuming that this projectFilter object is passed into the component as a prop.

import React from 'react';

export const SomeComponent = ({ projectFilter }) => {
    const [fieldValue, setFieldValue] = React.useState('');

    const clickHandler = (e) => {
        // Set the value of the state here. This will cause a re-render.
        setFieldValue(projectFilter.eventName);
    };

    return (
        <Grid item xs={4}>
            <MaterialTextField value={fieldValue} />
            <button onClick={clickHandler}>Click this</button>
        </Grid>
    );