title: How to collect data from json file and then add those separetely in a component
body: <p>I am using ant design for manupulating and showing my data. Here my json file is,</p>
  <p><strong>[
  {
  &quot;name&quot;:&quot;Dr. John Doe&quot;,
  &quot;org&quot;:&quot;Kings London Hospital&quot;,
  &quot;availibility&quot;:{
  &quot;sun&quot;:&quot;10:00 AM - 06:00 PM&quot;,
  &quot;wed&quot;:&quot;06:00 PM - 09:00 PM&quot;
  },
  &quot;visitDurationInMin&quot;:15
  },
  {
  &quot;name&quot;:&quot;Dr. Mary Ellis&quot;,
  &quot;org&quot;:&quot;ABC Hospital&quot;,
  &quot;availibility&quot;:{
  &quot;sun&quot;:&quot;10:00 AM - 06:00 PM&quot;,
  &quot;mon&quot;:&quot;09:00 PM - 11:00 PM&quot;,
  &quot;thu&quot;:&quot;11:00 AM - 02:00 PM&quot;
  },
  &quot;visitDurationInMin&quot;:15}
  ]</strong></p>
  <p>I am trying to collect all of these from that file and output those separately into a component.</p>
  <p>my component code is,</p>
  <pre><code>import &quot;antd/dist/antd.css&quot;;
  import { Layout, Descriptions, Calendar, Select , Modal } from &quot;antd&quot;;
  import Slot from './slot';
  import { useDispatch , useSelector } from &quot;react-redux&quot;;
  import { selectViewDate, selectViewSlots, setViewSlots } from &quot;../../features/userSlice&quot;;
  import Data from '../../data/data.json';
  
  
  const Doctorinfo = ({Data}) =&gt; {
    //  constructor(props){
    //      super(props);
    //      this.state = {
    //         viewSlot: false
    //       };
    //  }
  
    console.log(Data);
   
    const { Option } = Select;
    const { Content } = Layout;
  
    const dispatch = useDispatch();
  
    const isViewSlot = useSelector(selectViewSlots);
    const isViewDate = useSelector(selectViewDate);
    const viewSlotHandler = () =&gt; {
      // this.setState({
      //     viewSlot:true
      // })
  
      dispatch(setViewSlots(true));
    };
  
    return (
      &lt;div&gt;
        {isViewDate ? &lt;Content style={{ padding: &quot;0 50px&quot; }}&gt;
          &lt;Descriptions title=&quot;Doctor Details&quot;&gt;
            &lt;Descriptions.Item label=&quot;Name&quot;&gt;Anwar Hossain&lt;/Descriptions.Item&gt;
            &lt;Descriptions.Item label=&quot;Expertise In&quot;&gt;
              Neurologist
            &lt;/Descriptions.Item&gt;
          &lt;/Descriptions&gt;
          &lt;h1&gt;Available Date&lt;/h1&gt;
          &lt;Calendar onSelect={viewSlotHandler} /&gt;
        &lt;/Content&gt;:&quot;&quot;}
        {isViewSlot ? &lt;Slot/&gt; : &quot;&quot;}
      &lt;/div&gt;
    );
  }
  export default Doctorinfo;
  </code></pre>
  <p>i am trying to get name, availability and visitDuration. After getting i need to get availability time separately like:-</p>
  <p>Availability: Sunday</p>