String manipulation jsx

Question

I have a project in React Called Good Robot Bad robot. It looks like this:

(input box here)
    Hello! Wanna talk to some robots?
    I am good robot
    I hear you are saying, ______. is that correct?
    I am bad robot
    I hear you are saying, ______. is that correct?`

when I type in the input box the ___ changes to the users input. I am having trouble with having bad robot repeat only 'BLABLABLABLA' no matter what the user types. I know the problem lies within my function... i'm not entirely sure how to write it. Here is the code for app.js and badrobot.js:

import React, {Component} from 'react';
import Header from './Header'
import GreetingInput from './GreetingInput'
import GoodRobot from './GoodRobot'
import BadRobot from './BadRobot'
import './App.css';

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      greeting: '',
      name:'Stephen',
      robotgreeting: "______"
    }
  }

returnGreeting = (userSent) => {
  this.setState({greeting: userSent, robotgreeting: userSent})
}

render() {
  let {greeting, name, robotgreeting} = this.state
  return (
    <div className="App">
        <div>
          <Header greeting={name}/>
        </div>
        <div>
          <GreetingInput greeting={greeting} returnGreeting={this.returnGreeting}/>
        </div>
        <div>
          <GoodRobot greeting={robotgreeting}/>
        </div>
        <div>
          <BadRobot greeting ={robotgreeting} />
        </div>
    </div>
  );
  }
}

export default App;


 import React, {Component} from 'react';

    class BadRobot extends Component {

    wordManipulator = (word) => {
    let newStr = this.props.greeting.split('')
    let newStr2 = newStr.splice(null, word.length, 'b', 'l', 'a')
    return newStr2.join("")
    }
    // console.log(wordManipulator(this.props.greeting))

    render() {
      return (
        <div>
          <div>
            <h1>I am bad robot</h1>
            <h3>I hear you are saying, {this.props.greeting}. is that correct? </h3>
          </div>
        </div>
      );
     }
    }

    export default BadRobot;

Answer 1

As @Manuel mentioned you should might want to send the props.greeting variable to your wordManipulator function inorder to render the desirable output.

Also, in your wordManipulator function, this line newStr.splice(null, word.length, 'b', 'l', 'a') will only return bla irrespective of the props.greeting variable. If I understand correctly you want to repeat bla as you type.

I edited the wordManipulator function accordingly to just map each character of props.greeting to the bla's (repeatable string) corresponding index.

import React, {Component} from 'react';

const BLAH = "BLAH";

class BadRobot extends Component {

  wordManipulator = (word) => word.split("").map((c, i) => BLAH[(i % BLAH.length)]).join("")

  render() {
    return (
      <div>
        <div>
          <h1>I am bad robot</h1>
          <h3>I hear you are saying, {this.wordManipulator(this.props.greeting)}. is that correct? </h3>
        </div>
      </div>
    );
  }
}

export default BadRobot;

const greeting = "HELLO ROBOT!"

const BLAH = "BLAH";

const wordManipulator = (word) => word.split("").map((c, i) => BLAH[(i % BLAH.length)]).join("")

console.log(wordManipulator(greeting))

Answer 2

You could use a for loop for this:

wordManipulator = () => {
    let blaArray = ["b","l","a"];
    let counter = 0;   
    let newStr = this.props.greeting.split('')    
    let newStr2 = [];
    for(let i = 0;i<newStr.length;i++){
      if(counter > blaArray.length) counter=0;
      newStr2.push(blaArray[counter]);
      counter = counter+1;
    }
    newStr2 = newStr2.join("");
    return newStr2
    }

Then change your rendered code as Manuel suggested to:

render() {
      return (
        <div>
          <div>
            <h1>I am bad robot</h1>
            <h3>I hear you are saying, {this.wordManipulator()}. is that correct? </h3>
          </div>
        </div>
      );
     }

Answer 3

You should not use this.props.greetings directly on the jsx. insted use wordManipulator(this.props.greetings) like so:

render() {
      return (
        <div>
          <div>
            <h1>I am bad robot</h1>
            <h3>{`I hear you are saying, ${wordManipulator(this.props.greetings)}. is that correct?`}</h3>
          </div>
        </div>
      );
     }