How to render multiple component inside map function in REACT?

Question

I am using switch case statement in which i am using two map function. one map function is used for word and other is used for punctuation mark. basically i want to split a word with punctuation mark. here i face this problem in which everything is going fine but my component in not render. in if else what should i do call this component whose name is A and B.

</div>
<script type="text/babel">
 class A extends React.Component {
    constructor(props){
      super(props);
        this.state={
        }
    }

    render(){
      return (
        <div>
         {this.props.item}hello
        </div>
      )
    }
 }
 class B extends React.Component {
    constructor(props){
      super(props);
    }
  render(){
    return(
      <div>
        {this.props.items}
      </div>
    )


  }
 }
 class C extends React.Component {
    constructor(props){
      super(props);
      self =this; 
      this.state = {
        cstate:true,
        renderdComp:''
      }
      this.switch =this.switch.bind(this)
      this.callComp =this.callComp.bind(this)
    }

callComp(item,punc,k){ console.log("item =>",item,"punc =>",punc,"k =>",k);

    if(punc == '') {
     this.setState({
         renderdComp : "A"
       })   
return <A item={item}/>

    } else {
         this.setState({
         renderdComp : "B"
       })
         return <B items={item}/>

    }}
switch(stateValue) {
if(stateValue) {
    let freshItem;
    let puncItem;
    ['a;','as','df','fg'].map( function(item, i) {
        [';',':','<'].map( function (punc, j) {
            const isFoundPunc = item.indexOf(punc)
            if(isFoundPunc > -1) {
                console.log(isFoundPunc)
                freshItem = item.substr(0,isFoundPunc);
                console.log(freshItem)
                puncItem = item.substr(isFoundPunc,item.length);
                console.log(puncItem)

            } else {
               freshItem = item
                console.log(freshItem+"sec")
                puncItem = ''
                 console.log(puncItem+"sec")

            }
        })
        self.callComp(freshItem, puncItem, i)
    })
} 

} render(){ return( {this.switch(this.state.cstate)} ) } } ReactDOM.render(,document.getElementById("container"));

Answer 1

You can setState here in this function

 constructor() {
     this.callComp = this.callComp.bind(this)
     }
    callComp(item,punc,k){
        console.log("item =>",item,"punc =>",punc,"k =>",k);

        if(punc == '') {
         this.setState({
             renderdComp : "A"
           })   
    return <A item={item}/>

        } else {
             this.setState({
             renderdComp : "B"
           })
             return <B items={item}/>

        }

This should rerender your component C