in react component not see function in statical or classical way

Question

i have write this function in this component but its not change anything look like not see the function import React from 'react'

export default React.createClass({
    var arrNum=[15,16,35,36,37,38,39,40];
      var check=function(imgURL){
      var newUrl="";
      var imgNum=imgURL.slice(45,47)
      imgNum=Number(imgNum)
        for(var i=0;i < arrNum.length; i++){
            if(imgNum === arrNum[i]){
              newUrl=imgURL;
              newUrl=newUrl.replace(imgNum,imgNum+"_en");
              return newUrl
            }
          }
              return imgURL
      }
  render() {

    return <div>
     <div className="main">
          <img className="img1" src=check({this.props.img1})/>
          <img className="img2" src=check({this.props.img2})/>
          <img className="img3" src=check({this.props.img3})/>
          <img className="img4" src=check({this.props.img4})/>

     </div> 
   </div>
  }
})

how i can make this function work in react ?

Answer 1

Try to put the logic inside render , but before return

Example:

export default React.createClass({

  render() {
     var arrNum=[15,16,35,36,37,38,39,40];
      var check=function(imgURL){
      var newUrl="";
      var imgNum=imgURL.slice(45,47)
      imgNum=Number(imgNum)
        for(var i=0;i < arrNum.length; i++){
            if(imgNum === arrNum[i]){
              newUrl=imgURL;
              newUrl=newUrl.replace(imgNum,imgNum+"_en");
              return newUrl
            }
          }
              return imgURL
      }

    return (
      <div>
        <div className="main">
          <img className="img1" src=check({this.props.img1})/>
          <img className="img2" src=check({this.props.img2})/>
          <img className="img3" src=check({this.props.img3})/>
          <img className="img4" src=check({this.props.img4})/>

        </div> 
      </div>
    )  
  }
})

Answer 2

ReactClass signature is :

 ReactClass({
  functionName1 : functionItself1, 
  functionName3 : functionItself2, 
//....
  render : functionRenderItself,   
});

So you can consider check function as the function1 to have :

 ReactClass({
  check :/*...*/, 
  render : functionRenderItself,   
});

Then to access to check from render you have to precede it by this.

<img className="img1" src={this.check({this.props.img1)} />

Result :

const arrNum = [15, 16, 35, 36, 37, 38, 39, 40];

export default React.createClass({
  check:  function(imgURL) {
  var newUrl = "";
  var imgNum = imgURL.slice(45, 47)
  imgNum = Number(imgNum)
  for (var i = 0; i < arrNum.length; i++) {
    if (imgNum === arrNum[i]) {
      newUrl = imgURL;
      newUrl = newUrl.replace(imgNum, imgNum + "_en");
      return newUrl
    }
  }
  return imgURL
},
  render: function() {
    return (
      <div>
       <div className="main">
            <img className="img1" src={this.check(this.props.img1)} />
            <img className="img2" src={this.check(this.props.img2)}/>
            <img className="img3" src={this.check(this.props.img3)} />
            <img className="img4" src={this.check({this.props.img4)} />

       </div> 
     </div>
    );
  }
})

Did you believe that your code can be refactored to be :

const arrNum = [15, 16, 35, 36, 37, 38, 39, 40];

export default React.createClass({
  check: function(imgURL) {
    const imgNum = Number(imgURL.slice(45, 47));
    imgNum = arrNum.find((item) => item === imgNum);
    return (!imgNum) ? imgURL : imgURL.replace(imgNum, imgNum + "_en");
  },
  range: function(length) {
    return Array.from({length}, (v, k) => k + 1);
  },
  render: function() {
     return (
       <div>
        <div className="main">
         {
           this.range(4).map(i => <img className={"img"+ i} src={this.check(this.props["img"+i])} />)
         }
        </div>
       </div>
     );
  }
})