{"id":14323,"date":"2022-10-07T08:50:02","date_gmt":"2022-10-07T03:20:02","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/"},"modified":"2022-10-07T08:50:02","modified_gmt":"2022-10-07T03:20:02","slug":"solved-convert-the-following-piece-of-react-code-to-jsx","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/","title":{"rendered":"[Solved] convert the following piece of react code to JSX"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-60192394\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"60192394\" data-parentid=\"60183381\" data-score=\"0\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>At first I thought you were mixing up how to use React.createElement, but fundamentally I don&#8217;t think that is your issue. The problem arises that <code>Line<\/code> isn&#8217;t a react component that you can create an element from <em>and<\/em> pass props to. Instead, you need to create a container that you can then render the plot line into.<\/p>\n<p>Here&#8217;s an example component that gets some data and returns a container for plot rendering. It uses a couple lifecycle functions to handle the data update and plot creation. <code>componentDidUpdate<\/code> allows us to issue &#8220;side-effects&#8221; in response to react state or props updating, in this case, updating the rendered line plot.<\/p>\n<pre><code>class PlotReact extends Component {\n  \/\/ Set all line plot settings in state\n  state = {\n    title: {\n      visible: true,\n      text: \"DEF\"\n    },\n    description: {\n      visible: true,\n      text: \"ABC\"\n    },\n    padding: \"auto\",\n    forceFit: true,\n    data: [], \/\/ &lt;-- define default empty data array!\n    xField: \"year\",\n    yField: \"value\",\n    smooth: true\n  };\n\n  componentDidMount() {\n    \/\/ populate state data, this could be passed via prop, fetched, etc...\n    this.setState({ data: plotData });\n  }\n\n  componentDidUpdate() {\n    \/\/ state (or props) updated, recompute line and render it\n    const linePlot = new Line(document.getElementById(\"container\"), this.state);\n\n    linePlot.render();\n  }\n\n  render() {\n    \/\/ return a container for the line plot to be rendered into\n    return &lt;div id=\"container\" \/&gt;;\n  }\n}\n<\/code><\/pre>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codesandbox.io\/s\/modest-turing-ze9uu?fontsize=14&amp;hidenavigation=1&amp;module=%2Fsrc%2FApp.js&amp;theme=dark\"><img decoding=\"async\" src=\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml\" alt=\"Edit modest-turing-ze9uu\"><\/a><\/p>\n<p>If I had one suggestion\/tweak, it&#8217;d be to move the &#8220;state&#8221; logic (i.e. plot config, settings, data, etc..) out to a parent component and simply expose them as props. The component simplifies to:<\/p>\n<p><strong>PlotReact<\/strong><\/p>\n<pre><code>class PlotReact extends Component {\n  componentDidMount() {\n    this.renderPlot();\n  }\n\n  componentDidUpdate() {\n    this.renderPlot();\n  }\n\n  renderPlot() {\n    const linePlot = new Line(\n      document.getElementById(\"plot-container\"),\n      this.props \/\/ &lt;-- just getting from props now!\n    );\n\n    linePlot.render();\n  }\n\n  render() {\n    return &lt;div id=\"plot-container\" \/&gt;;\n  }\n}\n<\/code><\/pre>\n<p><strong>Some Parent<\/strong><\/p>\n<pre><code>export default function App() {\n  const plotConfig = {\n    title: {\n      visible: true,\n      text: \"DEF\"\n    },\n    description: {\n      visible: true,\n      text: \"ABC\"\n    },\n    padding: \"auto\",\n    forceFit: true,\n    xField: \"year\",\n    yField: \"value\",\n    smooth: true\n  };\n\n  \/\/ ... some function to fetch\/populate plotData\n\n  return (\n    &lt;div className=\"App\"&gt;\n      &lt;PlotReact {...plotConfig} data={plotData}\/&gt;\n    &lt;\/div&gt;\n  );\n}\n<\/code><\/pre>\n<p>This allows you to use different plot settings, change them during component lifecycle, and have multiple instantiations with different settings. In other words, it is now reusable as the render logic is decoupled from use cases.<\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\">0<\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved convert the following piece of react code to JSX <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] At first I thought you were mixing up how to use React.createElement, but fundamentally I don&#8217;t think that is your issue. The problem arises that Line isn&#8217;t a react component that you can create an element from and pass props to. Instead, you need to create a container that you can then render the &#8230; <a title=\"[Solved] convert the following piece of react code to JSX\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/\" aria-label=\"More on [Solved] convert the following piece of react code to JSX\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[333,3760,784],"class_list":["post-14323","post","type-post","status-publish","format-standard","hentry","category-solved","tag-javascript","tag-jsx","tag-reactjs"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] convert the following piece of react code to JSX - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] convert the following piece of react code to JSX - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] At first I thought you were mixing up how to use React.createElement, but fundamentally I don&#8217;t think that is your issue. The problem arises that Line isn&#8217;t a react component that you can create an element from and pass props to. Instead, you need to create a container that you can then render the ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-10-07T03:20:02+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] convert the following piece of react code to JSX\",\"datePublished\":\"2022-10-07T03:20:02+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/\"},\"wordCount\":207,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml\",\"keywords\":[\"javascript\",\"jsx\",\"reactjs\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/\",\"name\":\"[Solved] convert the following piece of react code to JSX - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml\",\"datePublished\":\"2022-10-07T03:20:02+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/#primaryimage\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] convert the following piece of react code to JSX\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] convert the following piece of react code to JSX - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] convert the following piece of react code to JSX - JassWeb","og_description":"[ad_1] At first I thought you were mixing up how to use React.createElement, but fundamentally I don&#8217;t think that is your issue. The problem arises that Line isn&#8217;t a react component that you can create an element from and pass props to. Instead, you need to create a container that you can then render the ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/","og_site_name":"JassWeb","article_published_time":"2022-10-07T03:20:02+00:00","og_image":[{"url":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml","type":"","width":"","height":""}],"author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] convert the following piece of react code to JSX","datePublished":"2022-10-07T03:20:02+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/"},"wordCount":207,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"image":{"@id":"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/#primaryimage"},"thumbnailUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml","keywords":["javascript","jsx","reactjs"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/","url":"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/","name":"[Solved] convert the following piece of react code to JSX - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"primaryImageOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/#primaryimage"},"image":{"@id":"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/#primaryimage"},"thumbnailUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml","datePublished":"2022-10-07T03:20:02+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/#primaryimage","url":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/uploads\/2022\/10\/Solved-convert-the-following-piece-of-react-code-to-JSX.svg.svg+xml"},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-convert-the-following-piece-of-react-code-to-jsx\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] convert the following piece of react code to JSX"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1776403586","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/14323","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=14323"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/14323\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=14323"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=14323"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=14323"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}