Return list item with nested ternary in React.js/JSX - ternary-operator

Question

I want my react component to return a list item depending on the type of object array that is fed to it (string array element versus non-string array element). Everything works except for the nested ternary part. The conditions are evaluated correctly, when I do <li>{console.log(listValue2)}</li> instead of <li>{listValue2}</li> , the correct value is logged. But the list item does not appear in the DOM or virtual DOM no matter which code I do. My code is also available at https://github.com/neallred/neallred/tree/master/src/components.
Any ideas?
List.jsx
import React from 'react';
export class List extends React.Component {
render(){
return (
<div>
{this.props.list.map(function(listValue, index){
return (
<div key={index}>
<h3>{listValue.title}</h3>
<p>{listValue.description}</p>
<ul>
{(typeof listValue.highlights === 'object' ?
listValue.highlights.map(function(listValue2, index2){
(typeof listValue.highlights[index2] === 'string' ?
<li>{listValue2}</li>
:
<li>{listValue2.title}</li>
)
})
:
<li>no highlights object/outside of nested conditional</li>
)}
</ul>
</div>
);
})}
</div>
);
}
}
This.props.list structure (FixturesEducation.jsx):
import React from 'react';
import { List } from './List.jsx';
...
const researchAssistant = {
title: 'Research Assistant Work',
description: `Working for Professors...`,
highlights: [
'Ensured research replicability',
'more strings here...',
'Used Stata scripts to conduct quantitative analyses'
]
};
const math = {
title: 'Mathematical Foundation',
description: 'Via several math and economics courses...',
highlights: [
'Game Theory (Econ 478)',
'more strings here...',
'Calculus I (Math 112 equivalent)'
]
};
const economics478 = {
title: 'Game Theory',
highlights: [
'several',
'strings...'
]
};
const economics459 = {
...
};
const economics388 = {
...};
const economics382 = {
...
};
const economics = {
title: 'Economics',
description: 'I learned about...,
highlights: [
economics478,
economics459,
economics388,
economics382
]
};
const politicalScience372 = {
...
};
const politicalScience376 = {
...
};
const politicalScience497r = {
...
};
const politicalScience470 = {
...
};
const politicalScience344 = {
...
};
const politicalScience = {
title: 'Political Science',
description: 'I learned a lot...',
highlights: [
politicalScience470,
politicalScience497r,
politicalScience376,
politicalScience372,
politicalScience344
]
};
const spanish = {
title: 'Spanish Language',
description: 'I obtained my Spanish Language certificate...'
};
const businessMinor = {
title: 'Business Minor',
description: 'I this minor, I learned...'
};
const FixturesEducation = {
title: 'Education',
description: 'I attended ...',
highlights: [
researchAssistant,
math,
economics,
politicalScience,
businessMinor,
spanish
]
};
export { FixturesEducation };
Code calling List component (Education.jsx):
import React from 'react';
import { List } from './List.jsx';
...
import { FixturesEducation } from './FixturesEducation.jsx';
...
export class Education extends React.Component {
render(){
return (
<div className='col-md-10 col-md-offset-1 panel' id='education'>
<h1>{FixturesEducation.title}</h1>
<List list ={FixturesEducation.highlights}/>
</div>
);
}
}