Concating string variable in array of strings

Question

i have an array of strings and a variable of type string and when i press on the button Next which is in the Step Wizard form i want to concat that Variable to the Array using a callback function from child to parent component the problem is that it's not working as i want it to be it keeps adding that same variable again and again even i did an if statement i didn't know what to do to solve it

the parent component function

  myCallback = () => {

    if (this.state.modules.includes(this.state.moduleTitle)) {

        this.setState({ modules: this.state.modules });
    }
    //works fine when there are no modules
    if (this.state.moduleTitle == "") {
        this.setState({ modules: this.state.modules });
    }
    else {

        this.setState({ modules: this.state.modules.concat(this.state.moduleTitle) })
    }

}

the " moduleTitle " is that string variable and " modules " is the array of strings

the child component

continue = e => {
    e.preventDefault();
   // this.setState({ value: "full" });
    this.props.callbackFromParent();
    this.props.nextStep();

}

the continue function is used to go to the next step of the form

Will Jenkins · Accepted Answer · 2019-08-01 16:27:18Z

2

It looks like all you need to do is to pass the new moduleTitle back via your callback:

continue = e => {
    e.preventDefault();
    const currentTitle = this.props.title // or whatever your prop is called
    this.props.callbackFromParent(currentTitle);
    this.props.nextStep();
}

and deal with it at the other end:

myCallback = newModuleTitle => {
  const currentModules = this.state.modules
  if (newModuleTitle !== '' && !currentModules.includes(newModuleTitle)) {
    this.setState({ modules: [...currentModules, newModuleTitle] })
  }
}

edited Aug 1, 2019 at 16:27

answered Aug 1, 2019 at 16:16

Will Jenkins

9,9371 gold badge30 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

AOUADI Slim Over a year ago

didn't get your question about the current title if it's from state or event

Will Jenkins Over a year ago

where is the moduleTitle? In the state, props, or on the button?

AOUADI Slim Over a year ago

it's in the state of the parent component and i passed it as a props to the child

AOUADI Slim Over a year ago

it's still the same problem when i press Next it's fine and when i go back and press again next it adds the newModuleTitle again despite i have that first if statement but it's not working

Will Jenkins Over a year ago

Ok, although you could just use the state in the parent, it's better practice to pass the data back with the click event, so that changes are treated as single atomic entities.

|

Collectives™ on Stack Overflow

Concating string variable in array of strings

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related