logo
down
shadow

Change state of buttons


Change state of buttons

By : user3100459
Date : January 12 2021, 07:00 PM
may help you . I would split up the code between logic and presentation. As you already reused AddToList it's just a visual component and should not contain any logic.
So I would move all logic to one component and then use the state to render the correct presentation:
code :
const AddToList: React.FC<IAddToListProps> = props => {
  const classes = useStyles(props);
  return (
    <div>
        <Button
          onClick={props.onClick}
          variant="contained"
          color="primary"
          className={classes.button}
        >
          {props.label}
        </Button>
    </div>
  );
};
export default function MovieCard() {
  const [movieTitle, setMovieTitle] = useState("lorem ipsum");
  const [year, setYear] = useState("1999");

  const [watched, setWatched] = useState(false);

  const classes = useStyles();

  const addToList = (action, id) => {
    fetch(`http://127.0.0.1:3000/${action}/${id}`, {
      method: "post"
    }).then(response => {
      console.log(response);
    });
  };

  return (
    <Card className={classes.card}>
      <CardActionArea>
        <CardMedia className={classes.media} image="#" title="anotherTitle" />
        <CardContent>
          <Typography gutterBottom variant="h5" component="h2">
            {movieTitle}
          </Typography>
          <Typography variant="body2" color="textSecondary" component="p">
            {year}
          </Typography>
          {!watched && (
            <AddToList
              label={"Add To Watch"}
              onClick={() => { addToList("towatch", 10); setWatched(true)} }
            />
          )}
          {watched && (
            <AddToList
              label={"Add To Seen"}
              onClick={() => addToList("watched", 10)}
            />
          )}
        </CardContent>
      </CardActionArea>
      <CardActions />
    </Card>
  );
}


Share : facebook icon twitter icon
Why the Activity does not change the state of view when buttons are clicked?

Why the Activity does not change the state of view when buttons are clicked?


By : jonni
Date : March 29 2020, 07:55 AM
To fix the issue you can do It's a little unclear what you're asking, but assuming it's the if that's causing you trouble:
code :
if  (a1_val + b2_val + a3_val + a4_val == eerner);
Change background of selected button only and keep the background of other buttons same as initial state of buttons

Change background of selected button only and keep the background of other buttons same as initial state of buttons


By : Malvik Chauhan
Date : March 29 2020, 07:55 AM
this will help It needs to add a model (array of booleans and access it in cellForRowAtIndexpath) for every cell that has a true or false value for selection state , and when one cell is clicked refresh the whole table to redraw
code :
@interface ViewController ()
   NSMutableArray*allValues;
  allValues = [NSMutableArray new];

  for(int i = 0 ;i<YourTableViewArrayCount;i++)
  {
     [allValues addObject:[NSNumber numberWithBool:NO]];
  }
  -(UITableViewCell*)tableView:(UITableView *)tableView cellForRowAtIndexPath:(nonnull NSIndexPath *)indexPath
 {

  bool d = [allValues[indexPath.row] boolValue];

  if(d)
  {
      // cell selected
  }
  else
  {
        // cell not selected
  }

  /// implement remaining here

 }
If I use onPress on any of my buttons they all change state. I want independent states

If I use onPress on any of my buttons they all change state. I want independent states


By : BogdanB
Date : March 29 2020, 07:55 AM
With these it helps If I use onPress on any of my buttons they all change state, they show the same value. I want them to be independent of each other using the same 2 functions (increment and decrement). , You could do something like this
code :
this.state = {
   icePacks: 0,
   bufPadPacks: 0
};

incrementPacks = type => {
   if(type === "Ice") {
    this.setState({ icePacks: this.state.icePacks + 1 })
   } else if(type === "BufPad") {
    this.setState({ bufPadPacks: this.state.bufPadPacks + 1 })
  }

  }

  decrementPacks = type => {
   if(type === "Ice") {
    this.setState({ icePacks: this.state.icePacks - 1 })
   } else if(type === "BufPad") {
    this.setState({ bufPadPacks: this.state.bufPadPacks - 1 })
  }

  }

<View style={styles.iceBtnContainer}>
    <Button title='-' onPress={() => this.decrementPacks("Ice")} />
    <Text style={styles.count}>{this.state.icePacks}</Text>
    <Button title='+' onPress={() => this.incrementPacks("Ice")} />
</View>


<View style={styles.bufPadBtnContainer}>
    <Button title='-' onPress={() => this.decrementPacks("BufPad")} />
    <Text style={styles.count}>{this.state.bufPadPacks}</Text>
    <Button title='+' onPress={() => this.incrementPacks("BufPad")} />
</View>
how to change this state with radio buttons

how to change this state with radio buttons


By : user3230932
Date : March 29 2020, 07:55 AM
this will help I have a few selectable buttons that I want to change by selecting any of these state radio buttons I want to use as a parameter to send information to the api , You should provide the value and onChange props to your radio input.
code :
<div className="row RegisterOptions">
    <div className="col" data-toggle="buttons">
        <label className="RegisterButtons">
            <input type="radio" name="TypeStatus" id="Justice" value="Justice" onChange={this.changeHandle}/>
            options1-1
        </label>
    </div>
    <div className="col" data-toggle="buttons">
        <label className="RegisterButtons">
            <input type="radio" name="TypeStatus" id="Credit" value="Credit" onChange={this.changeHandle}/>
            options1-2
        </label>
    </div>
</div>
changeHandle = (e) => {
   this.setState({
     [e.target.name]: e.target.value
   })
}
callAPI = () => {
    axios({
        method: 'post',
        url: 'https://test.ir/api/registerANewAdd',
        data: {
            TypeStatus: this.state.TypeStatus,
            OperatingStatus: this.state.OperatingStatus,
            RegistrationStatus: this.state.RegistrationStatus,
        }
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
}
<button onClick={this.callAPI}>Submit</button>
componentDidMount(){
   this.callAPI();
}
Change Buttons state in a Listview if a Button is clicked

Change Buttons state in a Listview if a Button is clicked


By : BCh
Date : March 29 2020, 07:55 AM
like below fixes the issue I have a list view of buttons in which every row has play button. If i clicked on First Play Button it changes to pause but if i pressed second row play button,then first will remain in pause state but i want that if any of button is pressed then the previous back to its play satate button and the clicked one changes to pause. Please Help , Try like this
Related Posts Related Posts :
  • React antd Upload input required error with default list
  • How to display dynamically fetched image on client end in react?
  • React: TypeError: Cannot read property 'prototype' of undefined
  • how can my call the action in my component using typescript with react redux?
  • typescript mapDispatchToProps got error when import component require pass actions as props
  • React doesn't render my Component, only if I restart my project
  • Function(method) is executing twice although only being called once
  • How can I remove a item class from a child's item in css and react?
  • React Devtools 4 DOM updates highlights
  • I am having trouble adding data to my table on submit
  • Axios post request is returning 401 unauthorised error
  • why is a React class component converted to functional component with hooks not picking up state in event handler on doc
  • How do I write a React Spring to change margin?
  • React tab doesn't appear in chrome developer tools
  • How to redirect to another component by setting up props from this component in react.js
  • Centre Buttons horizontally and vertically
  • Customize Reactive Search DateRange
  • Anyone know why my Component Keeps Remounting?
  • How to get the latest state value after using setState?
  • How to return value in component react typescript
  • RadioButton click TypeError: Cannot read property 'setState' of undefined
  • How should useDispatch be used to enforce type checking?
  • Property 'title' does not exist on type 'IntrinsicAttributes & IProps'
  • What are the disadvantages of client-only routes?
  • Dropping files or opening files from the file selector dialog box causes the React component to unmount
  • How to check if a component has been clicked after an onblur event in React
  • What should be considered as component in React
  • Updating Parents state from Child without triggering a rerender of Child in React
  • Select component is ignoring parent onClick event
  • How to add Condition inside render method in reactjs
  • How to fix form that will not allow text to be entered?
  • Cannot read property 'name' of undefined on React with my props
  • Material UI tooltip doesn't display on custom component, despite spreading props to that component
  • Unexpected output but expected view when using hooks React for toggle
  • Determine if two objects have an identical structure with Jest
  • Material ui - snackbox aria label not being read
  • Why is useState hook calling initialising value code twice?
  • React - override state by exists object properties
  • how to stop re-rendering of list items in context consumer when state changes
  • how to pass props one page to another page via react router?
  • How to display react numerical props only if they pass from the container?
  • Input in another component, error with target
  • What is the difference between props and children in Gatsby?
  • Validating conditional pairs of props with Typescript
  • React-Dropzone how convert each file to base64
  • How to change the return of a function to int?
  • Import only grid system from bootstrap to react
  • TypeScript Type for function arguments not erroring?
  • Unexpected user of comma operator no-sequences
  • React Native onChangeText like onChange in ReactJS
  • How to dynamically render an element on clicking a button
  • Cannot import components from react-bootstrap
  • How to prevent Office UI Fabric React DatePicker flyout from stealing focus when allowTextInput is true?
  • How delete item from redux state?
  • Uncaught TypeError: map is not a function In Reactjs with Firebase
  • Alternative to componentWillReceiveProps for my particular use case
  • Pokemon, API call Variable doesn't save
  • Rendered more hooks than during the previous render. when posting form data with React Hooks
  • How can I envoke <Link to=''> route transition from a custom function?
  • How to change certain div color base on number
  • shadow
    Privacy Policy - Terms - Contact Us © festivalmusicasacra.org