conditionalComponent.js

{queries.map(query => ({
  area: <Area key={query.id} name={query.name} {...query.definition} />,
  bar: <Bar key={query.id} name={query.name} {...query.definition} />,
  line: <Line key={query.id} name={query.name} {...query.definition} />
}[query.definition.cartesianType]))}

// Shorter version

{queries.map(query => {
  const Component = {area: Area, bar: Bar, line: Line}[query.definition.cartesiantype];
  return <Component key={query.id} name={query.name} {...query.definition} />;
})}

Thanks, @samsch! ;)