How to put classname and variables in ternary at Reactjs?

Question

I have different datasets. Some of them have only icon and some of them have images. I want to control the data whether iconurl is null or not in the beginning and then if has icon url I will use FontAwesome if iconurl = null I will use img tag. But my images does not come to screen. Also I have could not bring the name to h3 tag. It looks empty on the screen. I am confused a bit. May you help me please? thank you in advance.

Note: I have already checked some ternary examples in react but they were too basic.

render() {
    return (
        this.state.diagnoses.map(user =>
            <div className={'cat-box-region'}>
                <div className={'cat-box-position'}>
                    <div className={'cat-box'}>
                        {user.IconUrl ? (<FontAwesomeIcon icon={user.IconUrl} size="3x" className={'icon'}/>) : (<img src={user.ImgUrl} className={'ultrasound-img'}/>)}
                        <h3>{user.name}</h3>
                    </div>
                </div>
            </div>
        )
    );
}

I don't see anything related to ternary expression. This solely depends on data which is likely not what you expect it to be. Please, provide https://stackoverflow.com/help/mcve — Estus Flask, Sep 11 '18 at 15:56
Seems like `user` doesn't have the value you think it has. Add a `console.log(user)` and verify its value. — Felix Kling, Sep 11 '18 at 15:58
Replace your images/icons with simple text. Which one displays? Try displaying it without the ternary, it likely still wont display, thus ruling out the problems you've claimed were the issue. — Kevin B, Sep 11 '18 at 16:00
Maybe you have to use curly braces for map function too. And don't we need single parent tag for each render? https://stackoverflow.com/a/41374730 — , Sep 11 '18 at 16:03
@psinaught I'd rather say it should have less curly braces. They should be omitted on all the attributes with a static value. — Bergi, Sep 11 '18 at 16:06
@FelixKling I have checked in console and everydata looks clear and okay. — Çağatay Sert, Sep 11 '18 at 16:08
@KevinB I have changed as u said but there was not any problem. I could see every text clearly. Maybe the problem is related the syntax because I have used curly braces nested. — Çağatay Sert, Sep 11 '18 at 16:10
Right, you can see the text. that proves that the ternary is working. — Kevin B, Sep 11 '18 at 16:12
user.IconUrl is defined properly and have scope @ÇağataySert ? — Punit Vara, Sep 11 '18 at 16:12
@PunitVara Yes, I have json data which has IconUrl,ImgUrl,Name and unique Id . When I try to show only text on the screen of these data , I can. But when I write like above , img tags do not work. — Çağatay Sert, Sep 11 '18 at 16:16
@ÇağataySert Let me see how can I help. This is valid question and doesn't deserve negative. — Punit Vara, Sep 11 '18 at 16:18
@ÇağataySert icon=user.IconUrl remove curly brackets there. — Punit Vara, Sep 11 '18 at 16:19
@PunitVara when I remove it , I got error which says "Failed to compile". — Çağatay Sert, Sep 11 '18 at 16:21
@ÇağataySert Use if and else, whether it's working fine. However, there is definetely a syntax error but using if/else will give you clue about error. — Punit Vara, Sep 11 '18 at 17:54
if({user.IconUrl}) { {user.IconUrl} =
{user.name}
} else { {user.IconUrl} =
{user.name}
} — Punit Vara, Sep 11 '18 at 18:05
@PunitVara Hey, firstly thank you so much for your help. I have solved the problem by using two different arrays. I think the first code should work but I could not figure out the problem :D But now it works! thank you again for your help. — Çağatay Sert, Sep 12 '18 at 19:39
If you solved your problem, you might want to [post an answer](https://stackoverflow.com/help/self-answer) (and eventually accept it to mark the issue solved) instead of doing an edit to your question — Bergi, Sep 12 '18 at 19:39

score 2 · Answer 1 · answered Sep 12 '18 at 21:46

I solved problem like that :

class DiagnosisBox extends Component {
static propTypes = {};

state = {
    diagnoses: [],
    diagnosesWithImg: [],
    diagnosesWithIcon: []
};

componentDidMount() {
fetch('http://localhost:51210/api/service')
    .then(response => {
        return response.json();
    }).then(diagnoses => {
    this.setState({
        diagnoses,
    });
    console.log(diagnoses);
  })
}

render() {
this.state.diagnoses.map(stateData =>
    stateData.iconUrl ? this.state.diagnosesWithIcon.push(stateData)
        : this.state.diagnosesWithImg.push(stateData)
);

return (
    <div className={'cat-box-region'}>
        {this.state.diagnosesWithIcon.map(data =>
            <div key={data.id} className={'cat-box-position'}>
                <div className={'cat-box'}>
                    <FontAwesomeIcon icon={data.iconUrl} size="3x" className={'icon'} />
                    <h3>{data.diagnosisName}</h3>
                </div>
            </div>
        )}

        {this.state.diagnosesWithImg.map(data =>
            <div key={data.id} className={'cat-box-position'}>
                <div className={'cat-box'}>
                    <img src={data.ImgUrl} className={'ultrasound-img'}/>
                    <h3>{data.diagnosisName}</h3>
                </div>
            </div>
        )}

        </div>
    );
  }
}

export default DiagnosisBox;

How to put classname and variables in ternary at Reactjs?

{user.name}

{user.name}

1 Answers1