JS Function designed to return elements to React component not returning properly

vygrdev 0
Viewed 25

I am trying to check a set of data to see if a string has a particular prefix or suffix and then return the string broken up into <span> elements. The function I have written correctly matches the parts of teh string with the relevant morphemes in my data set but doesn't return the spans split up.

Currently it returns something like this:

<span></span>
<span>word</span>
<span></span>

Im not sure what i am doing wrong. Here is the code:


export const morphemeCheck2 = (word) => {
  return (
    <span>
      <span>{prefixCheck(word)}</span>
      <span>{suffixCheck(word)}</span>
      <span>{baseWord(word)}</span>
    </span>
  )
}

const prefixCheck = (x) => {
  api.getPrefixes().then((data) => {
    let prefixes = data
    for (let p = 0; p < prefixes.length; p++) {
      let prefix = prefixes[p].affix_name
      if (x.startsWith(prefix)) {
        return (
          <span className={'suffix ' + prefix} onMouseOver={() => {}}>
            {prefix}
          </span>
        )
      }
    }
  })
}

//needs refactoring
const baseWord = (x) => {
  if (prefixCheck(x) && suffixCheck(x)) {
    const prefix = prefixCheck(x)
    const suffix = suffixCheck(x)
    const prefixLength = prefix.props.children.length
    const suffixLength = suffix.props.children.length
    const tail = x.length - suffixLength
    return x.substring(prefixLength, tail)
  } else if (prefixCheck(x)) {
    const prefix = prefixCheck(x)
    const prefixLength = prefix.props.children.length
    return x.substring(prefixLength, x.length)
  } else if (suffixCheck(x)) {
    const suffix = suffixCheck(x)
    const suffixLength = suffix.props.children.length
    const tail = x.length - suffixLength
    return x.substring(0, tail)
  } else {
    return x
  }
}

const suffixCheck = (x) => {
  api.getSuffixes().then((data) => {
    let suffixes = data
    for (let s = 0; s < suffixes.length; s++) {
      let suffix = suffixes[s].affix_name
      if (x.endsWith(suffix)) {
        console.log(suffix)
        return (
          <span className={'suffix ' + suffix} onMouseOver={() => {}}>
            {suffix}
          </span>
        )
      }
    }
  })
}

Here is where it is called in the React component:

const AnalysisArea = () => {
 [...]

  let text = "recoded"

  return (
    <React.Fragment>
      <Card className="analysisframe">
        <p className="replicated-text" onClick={handleOpen}>
          {decoder.morphemeCheck2(text)}
        </p>
      </Card>
    </React.Fragment>
  )
}
reactjs javascript
1 Answers

You need to return something from prefixCheck and suffixCheck. Inside those two functions you just executed async call and did nothing with the result(no return statement inside function). I advise you to rewrite in async/await manner(because of readability) and, of course, to return desired result from those functions. If you need more help(to rewrite those functions) feel free to reach.

UPDATED WITH EXAMPLE OF REFACTORED FUNCTIONS Key point is to wait for the response in order to use that response of your async call and do something with it(return something based on api call response).

   const suffixCheck = async (x) => {
     const data = await api.getSuffixes(); // You need to await in order to get data that you want to use in order to return something
     let suffixes = data
     for (let s = 0; s < suffixes.length; s++) {
       let suffix = suffixes[s].affix_name
       if (x.endsWith(suffix)) {
         console.log(suffix)
         return (
           <span className={'suffix ' + suffix} onMouseOver={() => {}}>
             {suffix}
           </span>
         )
       }
     }
     return '';
  }

    

const prefixCheck = async (x) => {
  const data = await api.getPrefixes();
  let prefixes = data
  for (let p = 0; p < prefixes.length; p++) {
    let prefix = prefixes[p].affix_name
    if (x.startsWith(prefix)) {
      return (
        <span className={'suffix ' + prefix} onMouseOver={() => {}}>
          {prefix}
        </span>
      )
    }
  }
  return '';
}
Milos Pavlovic0
Related