CODEWITHSUNDEEP
stringreactjscomponents
lost9123193
lost9123193

Reputation: 11030

Adding Component's State to a String in React

I have a component with the following states: 

class Example extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      var1: "Dog",
      var2: "Cat",
      var3: [20, 40],
      currentFilter:"None"
    };
      this.updateFilter = this.updateFilter.bind(this);
  }

In the update filter function, I want to incorporate all the state properties, but the following syntax does not work:

updateFilter(){
  var newSearch= "Searching" {this.state.var1} + {this.state.var2}
  this.setState({
    currentFilter: newSearch
  });
}

Is there a way to incorporate the properties of state into the string variable?

Upvotes: 3

Views: 13636

Answers (2)

JoeyZhao
JoeyZhao

Reputation: 533

You can also do this:

updateFilter() {
  var newSearch = `Searching ${this.state.var1} ${this.state.var2} `;
  this.setState({
    currentFilter: newSearch
  });
}

Note those aren't single quotes. They are `

Upvotes: 0

jaybee
jaybee

Reputation: 2290

You don't need the curly braces unless you're writing JSX. Since your updateFilter() function is just a normal Javascript function, you can write it as:

updateFilter() {
  var newSearch = "Searching" + this.state.var1 + this.state.var2;
  this.setState({
    currentFilter: newSearch
  });
}

Though, FYI, what you'll get for newSearch will be an incoherent "SearchingDogCat" so you may want to rethink your concatenation.

Upvotes: 4

Related Questions